这是一个官方的组件，但是不符合自己业务逻辑，几经修改，勉强适合使用。

本插件适合有限视频轮播，先说说组件思路：

1、组件是使用微信组件swiper来做动画切换；

2、video标签，官方提示尽量不要超过3个标签（同一个界面），虽然我不知道为什么，但是肯定和性能有关；

链接地址：https://developers.weixin.qq.com/community/develop/doc/000e4ef22583d8961919efb6b56009

3、视频轮播逻辑规律是：组件是使用三个swiper-item一直做无限滚动（好处就是不会造成过多的节点，性能好），看图：

图的意思是滑动轮播的规律：箭头表示当前swiper滑动的位置，然后显示对应的视频，这样轮动排放的逻辑可以知道进可攻，退可守，不会出现上下滑播放顺序就乱了。

图片我们也可以发现，当视频数量刚好是3的倍数，不会有任何排放问题，但是如果是3的余数是1或者2时，那就出坑了，因为轮播swrper-item是固定三个的，所以修改的组件就是解决这个余数问题。

解决的思路是：当余数为1时，我们把当前swiper-item轮播变成4个轮播，当余数为2时，我们把当前swiper-item轮播变成2个轮播；这样就可以解决余数不为0的时候，但是有个特殊情况就是当视频刚好4个，应该直接全部swiper-item展示，无需其它逻辑处理。

// 下面的代码是官方没有的，自增核心代码
// 手势向上时处理逻辑
if ((total % 3) === 1 && nextQueue.length === 0) {
  let timers = new Date();
  let addItem = JSON.parse(JSON.stringify(add));
  addItem.idxKey = timers.getTime();
  curQueue[3] = addItem;
} else if ((total % 3) === 2 && nextQueue.length === 0) {
  let _pop = curQueue.pop();
  this.setData({
      _pop: _pop
  })
}
// 手势向下时处理逻辑
if ((total % 3) === 1 && curQueue.length === 4) {
  curQueue.pop();
} else if ((total % 3) === 2 && nextQueue.length === 0) {
  curQueue.push(this.data._pop);
}

这里有个坑就是视频自动播放，如果元素有两个渲染key是相同时，会造成视频点击两次才能播放；出现此问题主要发生在总数余1时会出现（即总是大于4以上，且总数余1,时，swiper-item出现四个时候会渲染两个相同的视频，导致key渲染相同）。

解决此问题：主要保证渲染的key是唯一的即可；

if ((total % 3) === 1 && nextQueue.length === 0) {
  let timers = new Date();
  let addItem = JSON.parse(JSON.stringify(add));
  addItem.idxKey = timers.getTime(); // 此语句就是保证添加四个swiper-item时，key是不同的
  curQueue[3] = addItem;
  } else if ((total % 3) === 2 && nextQueue.length === 0) {
     let _pop = curQueue.pop();
     this.setData({
      _pop: _pop
      })
}

如果不能理解我讲的，请下载测试代码片段自己测试并验证，有问题可以评论留意，相互学习。（使用在小程序名称为：iTOP-智能名片，需要进去后左滑，进入视频专辑，随便点击一个视频查看即可查看视频滑动效果）

这里的部分核心代码参考此文章（有修改点）：https://developers.weixin.qq.com/community/develop/article/doc/0006ecd75fce608033ba9348d51413

官方源码组件地址（没修改过的代码）：https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/video-swiper.html

本文章的代码片段：https://developers.weixin.qq.com/s/1M3qTFmg7ZmA