关于解决video-swiper组件的几个坑
发布于 4 年前 作者 luona 1201 次浏览 来自 分享

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 === 0return;
          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)
      },
回到顶部