基于 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();
mTikTokRef.value?.playSeeked(8);
使用示例
<template>
<div class="video-container">
<mTikTok
ref="mTikTokRef"
:video-list="state.videoList"
@loadMore="loadMore"
@change="change"
>
<!-- 此处为用户完全自定义 data 中的数据为当前渲染的数据 -->
<template v-slot="data">
<view class="video-side-right">
<view class="action-item action-item-user">
<image
class="shop-logo"
src="https://examples-1251000004.cos.ap-shanghai.myqcloud.com/sample.jpeg?imageMogr2/crop/180x180/gravity/center"
/>
<view class="action-btn">
<text class="iconfont">+</text>
</view>