利用uniapp中模仿抖音、滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能

抖音效果图

本内容主要实现了滑动视频组件、首个视频自动播放、预加载、实现加载更多，超高性能，

前言：最近在做短剧，于是就在网上找了很多不错的例子，但是不是很完美，基本上都比较卡顿，我也是在站在巨人的肩膀上优化了一下。本片主要基于vue3、setup和ts开发的。

相关参考：

video | uni-app官网 (dcloud.net.cn)

uni.createVideoContext(videoId, this) | uni-app官网 (dcloud.net.cn)

项目结构：

主要组件：代码里逻辑很清晰，就不再赘述了。video-play.vue

状态管理：

moudle.ts

import { reactive } from "vue"

const useState=()=>{
	return reactive({
		originList: [] as any, // 源数据
		displaySwiperList: [] as any, // swiper需要的数据
		displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
		originIndex: 0, // 记录源数据的下标
		current: 0,
		oid: 0,
		showControls: "",
		toggleShow: true, // 显示面板
		videoContexts: [] as any,
		isFirstLoad: true,
	})
}
export {useState}

引用逻辑：

以上测试逻辑都是基于小程序测试的，希望对于您有所帮助。