小程序 swiper 轮播图滚动图片 + 视频

直奔代码主题
wxml：

<view class="test_box">

  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
  <swiper-item>
  <view class='ceng'>
      <image  src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>
      <view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>
      <video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >
        <cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>
      </video>
  </view>
    </swiper-item>
  <block wx:for="{{imgUrls}}">

    <swiper-item>
      <image src="{{item}}"/>
    </swiper-item>
  </block>
</swiper>

</view>

wxss：

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
//swiper循环图片地址路径
    imgUrls: [
     '/img/01.jpg',
      '/img/02.jpg',
      '/img/03.jpg'

    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    //视频路径
    mdc_video:'',
    //替换视频的封面图
     mdc_videofenmian:'/img/f2.png',
    // 视频的封面图显示消失的参数
    xiaoshi:false,
    // 视频显示消失的参数
    mdc_show:true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (res) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // 封面点击的时候相应的操作  获取视频在JS里的参数属性
  //重点：点击图片接下来视频进行播放，但是视频播放后直接触发了视频的pause() 结局的方案是，延时150ms后再进行视频的播放，就完美解决了
  bindPlay:function(e){
    var that =this;
   that.videoContext = wx.createVideoContext('mdcVideo');
  //  that.videoContext.play()
   that.videoContext.pause();
   setTimeout(function () {

     that.videoContext.play()
   }, 150);
    that.setData({
      xiaoshi:true,
      mdc_show:false
    })

  },
//安卓系统能检测到 video touchemove 滑动的x距离，已此作为切换的swiper的凭证
//ios系统，检测不到video touchemove 滑动的x距离，通过cover-view 点击事件进行切换
  mdc_move1: function (e) {
    var that = this;
    console.log(e)
    console.log(e.touches[0].pageX)
    that.videoContext = wx.createVideoContext('mdcVideo');
    if (e.touches[0].clientX > 20) {
      console.log(5555555555555555)
      // that.videoContext.pause();
      that.setData({
      xiaoshi: false,
      mdc_show: true,
     })
    }
  },
  returnquanping:function(e){
    var that = this;
    that.setData({
      xiaoshi: false,
      mdc_show: true,
    })
  }
})

有图有真相，欢迎订阅