小程序一页显示多个视频video，细节交互优化处理

1、页面部分代码

    <view class="new-list" wx:for="{{videoList}}" wx:for-index="i" wx:for-item="item" wx:key="i">

      <view class="video-wrap">
        <!-- 视频展示海报，先不去显示video ,通过点击海报，显示当前的video标签，播放当前的视频，这样做的目的是节流，一开始加载很多video 标签的话会加载很慢，有点卡顿，所以点击哪个就是显示哪个video标签，再去加载当前标签视频资源 -->

        <view 
        class="video-wrap-img" 
        wx:if="{{!item['isPlay']}}"
        data-id="id_{{item.data.id}}" 
        data-index="{{i}}"
        bindtap="playVideo"
        >
        <!-- 海报 -->
          <image 
          class="poster"
            src="{{item.data.cover.feed}}">
          </image>
          
        </view>

        <!-- 视频 -->
        <video class="video" wx:if="{{item['isPlay']}}"
          show-play-btn="{{true}}" 
          controls="{{true}}"
          autoplay="{{true}}"
          duration="{{item.data.duration}}" 
          bindplay="handlePlay"
          src="{{item.data.playUrl}}"
          id="id_{{item.data.id}}"></video>
      </view>
    </view>

js部分代码

// pages/index/hotVideo/hotVideo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    videoList: [], // 通过接口获取数据
    
  },

 
  // 点击播放视频控制 ,多个视频点击播放的时候，如果不做处理，点击下个视频播放的时候，上一个也在播放，这很明显是不行的，每次只能有一个视频在播放
  handlePlay(event) {
    // 获取标签id
    let vid = event.currentTarget.id;
    //关闭上一个播放的视频
    this.vid !== vid && this.videoContext && this.videoContext.stop();
    this.vid = vid;
    //创建控制视频标签的实例对象
    this.videoContext = wx.createVideoContext(vid);
  },

  
  // 点击播放视频
  playVideo(e){
    let index = e.currentTarget.dataset.index;
    // 点击获取当前数据的索引，给当前数据加一个字段，页面上根据这个字段，显示当前点击的视频的video  
    this.data.videoList[index]['isPlay'] = true; 
    // 数据更改后要从新赋值， 页面才会变好
    this.setData({
      videoList: this.data.videoList
    })
  }
})

主要代码部分就是这些，如果有不明白的请留言，互相讨论学习。

（完结）

下面是我的小程序实现的效果，可以扫码看看