更新记录

0.0.1(2024-10-13) 下载此版本

完成了视频滑动更换,触底后自动更新视频(需要自行创建数据库相关逻辑)


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.28 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

一、实现的功能

1.仿抖音页面上下滑动变换视频播放

2.横屏视频会自适应居中显示。

二、需要自己修改的地方

1.页面中的视频列表数据我是静态写入的,实际运用肯定是需要通过查询数据库然后对视频列表进行更新。保存视频的空间地址当然要先配置到小程序白名单中。

2.页面中定义的 videoList 数组,就是保存页面视频的数组,建议每次请求最多10条数据。

3.页面中点赞,评论,收藏,转发只是做了图片的占位,没有做任何点击逻辑,需要自己完善,如不需要做这些展示也可直接删除。

三、源码解析

这里是做思路的说明,具体的源码请查看源文件

1.swiper组件中,定义了@animationfinish="animationEvent" 事件,该事件用于触发每次滑动停止后的回调函数。

2.animationEvent 这个回调函数中,需要先停止所有视频的播放,然后查看当前是第几个swiper-item ,然后播放对应item中的video

3.上一步中,有一个需要判断是否到了当前列表最后一个视频的逻辑,如果到了最后一个,就触发更新视频列表的操作。这里就需要修改 updateList() 函数中的内容了,因为我在这个函数中只是做了静态的变更,实际运用需要请求数据库发送新的数据,这个操作需要自己完善。

4.还有一点,需要说明,在onReady()函数中,我们需要将列表中所有的视频创建为一个视频上下文数组(既通过wx.createVideoContext()函数)。然后通过这个数组控制对应视频的播放。

四、总结

这个页面本身不难,关键点在于掌握videoContext相关api的使用,开源不易,如果有问题,可以留言提问。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问