video-swiper-短视频轮播,解决方案及部分思路
发布于 4 年前 作者 xuexiuying 4573 次浏览 来自 分享

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

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

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

1 回复

如果初始的时候 是从第5个进入页面的话, 有办法解决吗?我们还需要动态加载视频, 能帮忙看下怎么解决吗?

回到顶部