基于 uniapp 開發(fā)的仿抖音小程序組件（超高性能）
注：組件使用 vue3+typescript 開發(fā)
- 全局僅渲染 3 個 swiper-item
- 實測，不管加載多少數(shù)據(jù)也能絲滑滾動
- 適用于 vue3，vue2 請自行修
- 自動預(yù)加載視頻
- 首次渲染優(yōu)化
快速開始，下載插件后請按照此方法運行調(diào)試
- 安裝 nodejs: https://nodejs.org/en/
- 安裝依賴:
npm i - 運行項目:
npm run dev:mp-weixin - 構(gòu)建項目資源:
npm run build:mp-weixin - 打開小程序開發(fā)工具導(dǎo)入
dist/dev/mp-weixin即可 - 真機預(yù)覽，請點小程序開發(fā)工具上的預(yù)覽，掃碼真機預(yù)覽即可
下載鏈接
https://ext.dcloud.net.cn/plugin?id=13025文章來源地址http://www.zghlxwxcb.cn/news/detail-697973.html
參考 API
| 屬性 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| videoList | Array | - | 視頻列表，數(shù)組對象 {src: string, poster?: string, objectFit?: string}
|
| loop | Boolean | true | 是否循環(huán)播放視頻 |
| controls | Boolean | false | 顯示原生控制欄 |
| autoplay | Boolean | true | 是否自動播放 |
| autoChange | Boolean | false | 是否自動滾動播放 |
| loadMoreOffsetCount | Number | 2 | 滾動加載閾值（即播放到剩余多少個之后觸發(fā)加載更多 |
| @play | EventHandle | - | 當(dāng)開始/繼續(xù)播放時觸發(fā) play 事件 |
| @error | EventHandle | - | 視頻播放出錯時觸發(fā) |
| @ended | EventHandle | - | 當(dāng)播放到末尾時觸發(fā) ended 事件 |
| @loadMore | EventHandle | - | 當(dāng)滾動到最后第 N 條數(shù)據(jù)后，需要加載更多時觸發(fā) |
| @change | EventHandle | - | 切換視頻時觸發(fā) |
| @click | EventHandle | - | 點擊整個視頻區(qū)域觸發(fā) |
| @controlstoggle | EventHandle | - | 控制欄狀態(tài)變化觸發(fā) |
Slots 插槽
| 屬性 | 默認(rèn)值 | 說明 |
|---|---|---|
| default | - | 自定義內(nèi)容，覆蓋到視頻上方的所有自定義內(nèi)容 v-slot=“data” 為當(dāng)前渲染數(shù)據(jù)，請參照使用示例 |
方法
// 播放第幾個視頻
mTikTokRef.value?.initSwiperData(index);
// 播放與暫停
mTikTokRef.value?.togglePlay();
// 播放跳轉(zhuǎn)到指定位置，單位 s
mTikTokRef.value?.playSeeked(8);
使用示例
<template>
<div class="video-container">
<mTikTok
ref="mTikTokRef"
:video-list="state.videoList"
@loadMore="loadMore"
@change="change"
>
<!-- 此處為用戶完全自定義 data 中的數(shù)據(jù)為當(dāng)前渲染的數(shù)據(jù) -->
<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>
文章來源：http://www.zghlxwxcb.cn/news/detail-697973.html
到了這里，關(guān)于仿抖音短視頻小程序APP組件（超高性能）自動預(yù)加載-uniapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
