关于解决video-swiper组件的几个坑
1.不能从第一个视频播放
解决思路:在获取到数据后拿到第一条数据使用unshift放到数组的第一条(笨办法)
2.播放不到最后一个视频
解决思路:这个问题会在视频长度为3、6、9、12、下会出现,以此类推,相信大家看到这个长度就会有解决办法了吧
3.在播放到最后会重复播放倒数第二条
解决思路:这个问题会在视频长度为4、7、10、13、下会出现,以此类推,一开始还给数组复制了那个是不算在这个长度里的,这个长度最好是从后端拿,下面就贴代码
由于时间原因,解释的不太详细,直接贴图了,研究过源码里的算法一看就懂了,希望能帮助到大家,觉得还行给个赞以示鼓励
animationfinish: function animationfinish(e) {
var _data = this.data,
_last = _data._last,
_change = _data._change,
curQueue = _data.curQueue,
prevQueue = _data.prevQueue,
nextQueue = _data.nextQueue,
total = _data.total;
var current = e.detail.current;
var diff = current - _last;
if (diff === 0) return;
this.data._last = current;
this.playCurrent(current);
this.triggerEvent('change', { activeId: curQueue[current].id});
var direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') {
//判断下面是否有视频
if (this.data._invalidDown === 0) {
//当前索引
var change = (_change + 1) % 3;
//加入下一个视频
var add = nextQueue.shift();
//移除上一个视频
var remove = curQueue[change];
if (add) {
prevQueue.push(remove);
curQueue[change] = add;
this.data._change = change;
if((total%3) === 0 && nextQueue.length === 0) {
curQueue[3] = add
} else if((total%3) === 1 && nextQueue.length === 0){
this.setData({
_pop : curQueue.pop()
})
}
} else {
this.data._invalidUp += 1;
}
} else {
this.data._invalidDown -= 1;
}
}
if (direction === 'down') {
if (this.data._invalidUp === 0) {
var _change2 = _change;
var _remove = curQueue[_change2];
var _add = prevQueue.pop();
if (_add) {
curQueue[_change2] = _add;
nextQueue.unshift(_remove);
this.data._change = (_change2 - 1 + 3) % 3;
} else {
this.data._invalidDown += 1;
}
} else {
if((total%3) === 0 && curQueue.length === 4) {
curQueue.pop()
} else if((total%3) === 1 && nextQueue.length === 0){
curQueue.push(this.data._pop);
}
this.data._invalidUp -= 1;
}
}
var circular = true;
if (nextQueue.length === 0 && current !== 0) {
circular = false;
}
if (prevQueue.length === 0 && current !== 2) {
circular = false;
}
this.setData({
curQueue: curQueue,
circular: circular
});
// console.log(1, curQueue)
// console.log(2, prevQueue)
// console.log(3, nextQueue)
// console.log('--------------', _change)
},