这是一个官方的组件,但是不符合自己业务逻辑,几经修改,勉强适合使用。
本插件适合有限视频轮播,先说说组件思路:
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