仿抖音短视频小程序APP组件（超高性能）自动预加载

仿抖音短视频小程序APP组件（超高性能）自动预加载

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

注：组件使用 vue3+typescript 开发

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

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

1. 安装 nodejs: /
2. 安装依赖: npm i
3. 运行项目: npm run dev:mp-weixin
4. 构建项目资源: npm run build:mp-weixin
5. 打开小程序开发工具导入dist/dev/mp-weixin 即可
6. 真机预览，请点小程序开发工具上的预览，扫码真机预览即可

下载链接

参考 API

Slots 插槽

方法

// 播放第几个视频
mTikTokRef.value?.initSwiperData(index);// 播放与暂停
mTikTokRef.value?.togglePlay();// 播放跳转到指定位置，单位 s
mTikTokRef.value?.playSeeked(8);

使用示例

<template><div class="video-container"><mTikTokref="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"><imageclass="shop-logo"src=".jpeg?imageMogr2/crop/180x180/gravity/center"/><view class="action-btn"><text class="iconfont">+</text></view>