video-swiper短视频轮播,解决方案2(增加动态加载数据)
实现短视频小程序指定到某个视频开始轮播,方案1已经解析过,这里就不多说了,不懂的可以请移步到这里查看:https://developers.weixin.qq.com/community/develop/article/doc/000c2e0afc8cc8b2a96b36d665b413
这里主要讲的是,如何进行动态加载数据问题
第一步,在获取数据列表中加个条件判断,如果超过你设置的长度就算二次获取数据,进行数据切割加到将要预览的数组里面,代码如下(主要看条件判断,这里以10个数据为例):
videoList: {
type: Array,
value: [],
observer: function 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', {});
}
就加这两步,轻松完成一个短视频,从定位到某个视频开始播放,到数据没有时进行预加载视频。
有什么问题,欢迎随时咨询。