更新记录

0.0.1（2024-10-13） 下载此版本

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

平台兼容性

一、实现的功能

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的使用，开源不易，如果有问题，可以留言提问。