评论

video-swiper短视频轮播,解决方案2(增加动态加载数据)

一个常用的短视频播放,可以定位到某个视频开始播放,可以是有限数据进行轮播播放,可以动态获取数据播放,不知是否满足你的小需求,欢迎star一个,感谢;

实现短视频小程序指定到某个视频开始轮播,方案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/Ikk98ymm7tph

最后一次编辑于  2021-04-14  
点赞 8
收藏
评论

13 个评论

  • 月光
    月光
    发表于移动端
    2021-04-23
    大佬,这是自己做了一个短视频小程序?
    2021-04-23
    赞同
    回复 8
    • 哈罗哈皮
      哈罗哈皮
      2021-04-25
      参考微信扩展的组件,修改成自己业务需求
      2021-04-25
      回复
    • 好命先生
      好命先生
      2022-08-10回复哈罗哈皮
      大佬,有线上的完整小程序效果参考吗?
      2022-08-10
      回复
    • 哈罗哈皮
      哈罗哈皮
      2022-08-11回复好命先生
      搜索,“品拓”小程序首页视频就是用这个组件
      2022-08-11
      回复
    • 好命先生
      好命先生
      2022-08-11回复哈罗哈皮
      我们的需求不用做轮播,你这个组件能直接用?
      2022-08-11
      回复
    • 哈罗哈皮
      哈罗哈皮
      发表于小程序端
      2022-08-11回复好命先生

      不用轮播那直接写video显示就行,不用写这么麻烦

      2022-08-11
      回复
    查看更多(3)
  • 米粒物联
    米粒物联
    2021-04-22

    请问一下,用户上传视频时怎么安全检测的呢

    2021-04-22
    赞同
    回复 1
    • 哈罗哈皮
      哈罗哈皮
      2021-04-23
      这种检查一般都是买第三方的检测接口来过滤吧,我现在没做这个,人工检测
      2021-04-23
      回复
  • 海阔天空
    海阔天空
    2021-04-12

    代码片段好像打不开呢

    2021-04-12
    赞同
    回复 10
    • 哈罗哈皮
      哈罗哈皮
      2021-04-12
      我可以打开哦,不知道你那里会提示什么?
      2021-04-12
      回复
    • 海阔天空
      海阔天空
      2021-04-12回复哈罗哈皮
      嗯嗯,重启下开发者工具可以了
      2021-04-12
      回复
    • 哈罗哈皮
      哈罗哈皮
      2021-04-12回复海阔天空
      好的
      2021-04-12
      回复
    • 海阔天空
      海阔天空
      2021-04-12回复哈罗哈皮
      请问下定位到某个视频开始播放,current_index:2,但是视频播放显示是video_4,这个好像没有对应上
      2021-04-12
      回复
    • 哈罗哈皮
      哈罗哈皮
      2021-04-13回复海阔天空
      我看看
      2021-04-13
      回复
    查看更多(5)

正在加载...

登录 后发表内容