video-swiper短视频轮播,解决方案2(增加动态加载数据)
发布于 4 年前 作者 xiulan97 1672 次浏览 来自 分享

实现短视频小程序指定到某个视频开始轮播,方案1已经解析过,这里就不多说了,不懂的可以请移步到这里查看:https://developers.weixin.qq.com/community/develop/article/doc/000c2e0afc8cc8b2a96b36d665b413

这里主要讲的是,如何进行动态加载数据问题

第一步,在获取数据列表中加个条件判断,如果超过你设置的长度就算二次获取数据,进行数据切割加到将要预览的数组里面,代码如下(主要看条件判断,这里以10个数据为例):

videoList: {
            typeArray,
            value: [],
            observerfunction observer() {
                var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
                if (newVal.length) {
                    newVal.map((item, index) => {
                        return item.idxKey = index + 1;
                    });
                    if (newVal.length<=10) {
                        this._videoListChanged(newVal);
                    } else { // 重点是这里的条件判断
                        // 防止当前数组被污染
                        let arr = JSON.parse(JSON.stringify(newVal));
                        // 去掉已有的数据
                        let nextArr = arr.splice(this.data.total);
                        this.data.nextQueue.push(...nextArr);
                    }
                    this.setData({total: newVal.length})
                }
            }
        }

第二步,在每次滑动视频时,判断下当前视频总数和剩下视频个数,满足条件即可请求加载数据,代码如下:

// 判断总数据是否大于等于10,并且下滑剩下4个视频开始请求接口拿数据;这里大小可以根据自己需求修改
if (total>=10 && nextQueue.length < 5) {
  this.triggerEvent('UpdataVideo', {});
}

就加这两步,轻松完成一个短视频,从定位到某个视频开始播放,到数据没有时进行预加载视频。

有什么问题,欢迎随时咨询。

完整版代码片段:https://developers.weixin.qq.com/s/Z7uDPvmU7Bpl

1 回复

代码片段好像打不开呢

回到顶部