微信小程序实现商品轮播图(视频+图片)播放滑动暂停, 点击预览图片等功能

我们现在看看代码,最后看一下效果:

核心代码: js

Page({

    data: {
        videoSrc: '',
        videoImg: '',                                     //视频封面，缓冲时会出现黑屏，加视频封面会提升用户体验，但是ios手机封面图会闪现，不知道怎么解决
        autoplay: true,
        touchX: 0,                                        //手指按下时x的坐标
        touchY: 0,                                        //手指按下时y的坐标
        interval: null,                                   //计时器
        time: 0,                                          //按下到松开的时间
        current: 0                                        //swiper的当前轮播图下标
    },
    //事件处理函数
  play: function (val) {
    this.setData({
      videoSrc: val.currentTarget.dataset.item.video,
      autoplay: false,
      videoImg: val.currentTarget.dataset.item.img
    })
  },
  //禁止视频的手动控制进度属性，监听手指移动去滑动轮播图（手指滑动轮播图和控制视频进度事件冲突）
  //手指开始触屏
  start: function (e) {
    //获取触摸的原始点
    this.setData({
      touchX: e.touches.length > 0 ? e.touches[0].pageX : 0,
      touchY: e.touches.length > 0 ? e.touches[0].pageY : 0
    })
    let timeNew = this.data.time
    //开始记录时间
    this.data.interval = setInterval(() => timeNew++, 100)
    this.setData({
      time: timeNew
    })
  },
  //手指结束触屏
  end: function (e) {
    let touchX = e.changedTouches.length > 0 ? e.changedTouches[0].pageX : 0
    let touchY = e.changedTouches.length > 0 ? e.changedTouches[0].pageY : 0
    let tmX = touchX - this.data.touchX
    let tmY = touchY - this.data.touchY
    if (this.data.time < 10) {
      let absX = Math.abs(tmX)
      let absY = Math.abs(tmY)
      if (absX > 2 * absY) {
        // console.log('5555')
        //滑动swiper，视频停止播放
        this.setData({
          autoplay: true,
          videoSrc: '',
          videoImg: ''
        })
        if (tmX < 0) {
          //左滑
          // console.log('左滑')
          this.setData({
            current: this.data.current == (this.data.banner_list.length - 1) ? 0 : this.data.current + 1
          })
        } else {
          //右滑
          // console.log('右滑')
          this.setData({
            current: this.data.current > 0 ? this.data.current - 1 : this.data.banner_list.length - 1
          })
        }
      }
    }
    clearInterval(this.data.interval)
    this.setData({
      time: 0
    })
  },
  handleStop: function () {
    this.setData({
      videoSrc: '',
      autoplay: true,
      videoImg: ''
    })
  },
  changeCurrent: function (e) {
    //手指滑动轮播图已经在视频播放的时候做了，这里只需要做轮播图自动滚动，但是不停的调用setData可能会出现一些未知的bug，可根据需求场景设置
    if (e.detail.source == 'autoplay') {
      this.setData({
        current: e.detail.current
      })
    }
  },
})

wxml

<!-- 轮播图 S -->
		<view style="padding:0" data-e="{{e}}" bindtouchstart="start" bindtouchend="end">
			<swiper class="detail-banner" wx:if="{{!videoSrc}}" current="{{current}}" circular="{{true}}" indicator-dots="{{true}}" autoplay="{{autoplay}}" data-e="{{e}}" bindchange="changeCurrent">
				<view wx:for="{{banner_list}}" wx:key="index">
					<swiper-item>
						<image bindtap="previewImage" src="{{item.url}}" data-src="{{item.url}}" data-index="{{index}}" style="width:100%;height:100%" mode='aspectFill' />
						<image class="playbtn" wx:if="{{item.type == 1}}" src='https://ico.dongtiyan.com/tu-93.png' bindtap="play" data-item="{{item}}" />
						<view class="nums">
							<image src="https://ico.dongtiyan.com/tu-127.png"></image>
							<view>
								<text>{{index+1}}</text>
								<text> / </text>
								<text>{{banner_list.length}}</text>
							</view>
						</view>
					</swiper-item>
				</view>
			</swiper>
			<video enable-progress-gesture="{{false}}" custom-catch="{{false}}" wx:if="{{videoSrc}}" style="width:100%;height:579rpx" autoplay="{{true}}" src="{{videoSrc}}" controls="controls" bindpause="handleStop"></video>
		</view>
		<!-- 轮播图 E -->

wxss

/* 轮播图 */

.detail-banner {
  width: 100%;
  height: 579rpx;
  background: white;
}

.detail-banner-img {
  width: 100%;
  height: 100%;
}

.nums {
  position: fixed;
  right: 0;
  bottom: 52rpx;
  width: 102rpx;
  height: 51rpx;
  color: #fff;
}

.nums image {
  width: 102rpx;
  height: 51rpx;
}

.nums view {
  position: fixed;
  margin-top: -63rpx;
  right: 24rpx;
}

.nums view text:nth-child(1) {
  font-size: 32rpx;
}

.nums view text:nth-child(2) {
  font-size: 14.94rpx;
}

.nums view text:nth-child(3) {
  font-size: 20rpx;
}

json

{
  "navigationStyle": "custom",
  "usingComponents": {}
}

最后来看一下效果吧

刚开始我也不知所措,在网上找个很多,尝试了很多办法,并没有找到完整功能的代码,只能靠自己结合需要的效果来实现,我来个大家分享一下完整效果实现思路,有什么更简单实用的,请下方留言, 一起学习讨论, 谢谢

数据结构:

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了