仿抖音短视频小程序APP组件（超高性能）自动预加载-uniapp-Toy模板网

这篇具有很好参考价值的文章主要介绍了仿抖音短视频小程序APP组件（超高性能）自动预加载-uniapp。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基于 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文章来源地址https://www.toymoban.com/news/detail-697973.html

参考 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);

使用示例


<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>