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

注：组件使用 vue3+typescript 开发

全局仅渲染 3 个 swiper-item

实测，不管加载多少数据也能丝滑滚动

适用于 vue3，vue2 请自行修

自动预加载视频

首次渲染优化

快速开始，下载插件后请按照此方法运行调试

安装 nodejs: https://nodejs.org/en/

安装依赖: npm i

运行项目: npm run dev:mp-weixin

构建项目资源: npm run build:mp-weixin

打开小程序开发工具导入dist/dev/mp-weixin 即可

真机预览，请点小程序开发工具上的预览，扫码真机预览即可

下载链接

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

参考 API

属性

类型

默认值

说明

videoList

Array

-

视频列表，数组对象 {src: string, poster?: string, objectFit?: string}

loop

Boolean

true

是否循环播放视频

controls

Boolean

false

显示原生控制栏

autoplay

Boolean

true

是否自动播放

autoChange

Boolean

false

是否自动滚动播放

loadMoreOffsetCount

Number

2

滚动加载阈值（即播放到剩余多少个之后触发加载更多

@play

EventHandle

-

当开始/继续播放时触发 play 事件

@error

EventHandle

-

视频播放出错时触发

@ended

EventHandle

-

当播放到末尾时触发 ended 事件

@loadMore

EventHandle

-

当滚动到最后第 N 条数据后，需要加载更多时触发

@change

EventHandle

-

切换视频时触发

@click

EventHandle

-

点击整个视频区域触发

@controlstoggle

EventHandle

-

控制栏状态变化触发

Slots 插槽

属性

默认值

说明

default

-

自定义内容，覆盖到视频上方的所有自定义内容 v-slot=“data” 为当前渲染数据，请参照使用示例

方法

// 播放第几个视频

mTikTokRef.value?.initSwiperData(index);

// 播放与暂停

mTikTokRef.value?.togglePlay();

// 播放跳转到指定位置，单位 s

mTikTokRef.value?.playSeeked(8);

使用示例