uniapp 仿抖音小程序组件（超高性能）预加载

基于 uniapp 开发的仿抖音小程序组件（超高性能）预加载

先看效果图：

注：组件使用 vue3+typescript 开发

• 全局仅渲染 3 个 swiper-item
• 实测，不管加载多少数据也能丝滑滚动
• 适用于 vue3，vue2 请自行修
• 自动预加载视频
• 首次渲染优化

插件下载地址

https://ext.dcloud.net.cn/plugin?id=13025

快速开始

1. 安装 nodejs: https://nodejs.org/en/
2. 安装依赖: npm i
3. 运行项目: npm run dev:mp-weixin
4. 构建项目资源: npm run build:mp-weixin
5. 打开小程序开发工具导入dist/dev/mp-weixin 即可

参考 API

属性	类型	说明
videoList	Array	视频列表，数组对象 {src: string, poster?: string, objectFit: string}
loop	Boolean	是否循环播放视频
controls	Boolean	显示原生控制栏
autoplay	Boolean	是否自动播放
autoChange	Boolean	是否自动滚动播放
loadMoreOffsetCount	Boolean	滚动加载阈值（即播放到剩余多少个之后触发加载更多
@play	EventHandle	当开始/继续播放时触发 play 事件
@error	EventHandle	视频播放出错时触发
@ended	EventHandle	当播放到末尾时触发 ended 事件
@loadMore	EventHandle	当滚动到最后第 N 条数据后，需要加载更多时触发
@change	EventHandle	切换视频时触发
@click	EventHandle	点击整个视频区域触发
@controlstoggle	EventHandle	控制栏状态变化触发

Slots 插槽

属性	默认值	说明
default	-	自定义内容，覆盖到视频上方的所有自定义内容 v-slot="data" 为当前渲染数据，请参照使用示例

使用示例