抖音小程序实现video视频+多图显示（仿照小米商城效果）

一、在index.ttml 添加如下代码

 <view class="thumbnail-vieo">
        <view class="pro_detail">
          <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
                <swiper-item>
                    <view class="item">
                       <video src="{{pinfo[0].slVideo}}" loop="{{true}}" bindpause="{{bindpause}}" controls="{{false}}" id="myVideo" enable-play-gesture="{{true}}" style="width: 100%; height: 100%;">
                          <view class="mainC-mask" tt:if='{{play_flag!=0}}'>
                              <image class="mainC-bg" src='{{pinfo[0].slVideoImage}}'></image>
                              <view class="mainC-wrap">
                                  <view class="mainC-btn-play" catchtap="bind_play">
                                      <image src='../../static/play.png'></image>
                                  </view>
                              </view>
                          </view>
                       </video>
                    </view>
                  </swiper-item>
                  <block tt:for="{{pinfo[0].Attributes_}}" tt:key="index">
                      <swiper-item>
                      <view class="item">
                        <image src="{{item}}" style="width: 100%; height: 100%;"></image>
                      </view>
                    </swiper-item>
                  </block> 
            </swiper>
            <view class="current-dot" hidden="{{hidden}}">
              <view class="dotnum">{{current}}/{{pinfo[0].Attributes_.length}}</view>
            </view>
            <view class="imrpt">
                  <text class="dot {{doton}}-{{color}}" bindtap="showVideo">视频</text>
                  <text class="dot {{doton2}}-{{color}}" bindtap="showImage">图片</text>
            </view>
      </view>
   </view>

index.ttss

/* 视频 */

.pro_detail{
  position: relative;
}
.pro_detail swiper{
  height: 750rpx;
}
.swiper-item{
  display: block;
  height: 750rpx;
}
video{
    width: 100%;
    height: 100%;
}
image{
  width: 100%;
  height: 100%;
}

.current-dot{
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 16rpx;
  justify-content: flex-end;
  align-items: center;
}
.dotnum{
  margin-right: 20rpx;
  width: 70rpx;
  height: 35rpx;
  font-size: 26rpx;
  text-align: center;
  margin-bottom: 10rpx;
  line-height: 35rpx;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.50);
  border-radius: 20rpx;
  letter-spacing: 1px;
}

.imrpt {
  position: absolute;
  bottom: 20rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}
.imrpt text{
  display: block;
  width: 120rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 24rpx;
  background-color: #e4e4e4;
  margin: 0 20rpx;
  border-radius: 30rpx;

}
.imrpt text.doton{
  background-color: rgb(51, 126, 224);
  color: #fff;
}
swiper-item .item{
  height: 100%;
}
.mainC {
  width: 100%;
  height: 425rpx;
  position: relative;
  background-color: #fff;
}
 
.mainC-img {
  width: 100%;
  height: 100%;
  position: relative;
}
 
.mainC-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
 
.mainC-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
 
.mainC-bg {
  width: 100%;
  height: 100%;
}
 
.mainC-btn-play {
  width: 100rpx;
  height: 100rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border: 5rpx solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -60rpx;
  margin-left: -60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainC-btn-play image{
    width: 40rpx;
    height: 40rpx;
}

index.js

Page({
  data: {
    pinfo: [],
    cinfos: [],
    dotNum:0,
    color: '',
    collectStatus: false,
    indicatorDots: false,
    autoplay: false,
    interval: 3000,
    duration: 500,
    current: 0,
    hidden:true,
    hiddenvideo:false,
    hiddenimages:false,
    hiddenimage:false,
    doton:'active',
    doton2:'',
    startX: 0,
    bindpause:false,
    endX: 0,
    play_flag: -1,
  },
 
    /**/ 
    onReady: function () {
      var that = this;
      that.data.videoContext = tt.createVideoContext('myVideo');
    },
  
    // 视屏播放
    bind_play(e) {
      var that = this;
      that.setData({
        play_flag: 0
      });
      that.data.videoContext.play(); // 视频播放
      that.data.videoContext.seek(0);// 视频进度为0
    },

    swiperChange: function (e) {
      let dotActive = e.detail.current;
      this.setData({
        current: dotActive
      });
      if (e.detail.current > 0 ) {
        this.setData({
          hidden: false,
          doton:'',
          doton2:'active',
          bindpause:true,
        });
      } else {
        this.setData({
          hidden: true,
          doton:'active',
          doton2:'',
        });
      }
    },
  
    showVideo: function () {
      // 切换到视频的索引
  
      this.setData({
        current: 0 
      });
    },
    showImage: function () {
      var videoplay = tt.createVideoContext("myVideo");
      videoplay.pause()
      videoplay.seek(0)
      // 切换到图片的索引
      this.setData({
        play_flag: 1,
        current: 1 
      });
    },
    touchStart: function (e) {
      this.setData({
        startX: e.touches[0].clientX
      });
    },
    touchMove: function (e) {
      this.setData({
        endX: e.touches[0].clientX
      });
    },
    touchEnd: function () {
      const diff = this.data.endX - this.data.startX;
      if (diff > 100) {
        // 向右拖拽，切换到上一个元素
        if (this.data.current > 0) {
          this.setData({
            current: this.data.current - 1
          });
        }
      } else if (diff < -100) {
        // 向左拖拽，切换到下一个元素
        if (this.data.current < this.data.pinfo.length - 1) {
          this.setData({
            current: this.data.current + 1
          });
        }
      }
    },
});

效果图：