DIY可视化实现仿抖音短视频代码生成器

DIY可视化实现仿抖音短视频代码生成器，仿抖音短视频兼容uniapp、微信小程序 丝滑切换视频效果，无限数据加载不卡顿，高性能滑动不卡顿超流畅，观看视频丝滑切换，页面内容自定义，无限数据加载不卡顿。

在线设计请求远程数据源，绑定数据源、视频源、标题等。所有界面上的元素都支持在线自定义。

在线请求API

<template>
	<view class="container container21094">
		<view class="flex diygw-col-24">
			<swiper :current="swipersIndex" @animationfinish="playVideoFunction" class="swiper" @change="changeSwipers" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="rgba(64, 64, 64, 0.93)" interval="3000" vertical="true" circular="true" style="height: 100vh">
				<swiper-item v-for="(item, index) in datas.rows" :key="index" class="diygw-swiper-item">
					<view class="diygw-swiper-item-wrap">
						<view class="flex diygw-col-24">
							<video ref="refVideo" :id="'video' + index" :controls="false" :show-center-play-btn="true" :show-play-btn="false" :show-fullscreen-btn="false" :src="item.src" style="width: 100%; height: 100vh" object-fit="contain" :title="item.title" poster=""></video>
						</view>
						<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
							<view class="diygw-col-24 text-clz">
								{{ item.title }}
							</view>
							<view class="diygw-col-24">
								{{ item.remark }}
							</view>
						</view>
						<view class="flex flex-wrap diygw-col-0 flex-direction-column flex1-clz">
							<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex2-clz">
								<image :src="item.avatar" class="image8-size diygw-image diygw-col-0 image8-clz" mode="widthFix"></image>
							</view>
							<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex5-clz" @tap="navigateTo" data-type="tip" data-tip="触发收藏">
								<text class="flex icon3 diygw-col-0 diy-icon-star"></text>
								<view class="diygw-col-0">
									{{ item.star }}
								</view>
							</view>
							<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex3-clz" @tap="navigateTo" data-type="tip" data-tip="触发消息">
								<text class="flex icon1 diygw-col-0 diy-icon-message"></text>
								<view class="diygw-col-0">
									{{ item.comment }}
								</view>
							</view>
							<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex4-clz" @tap="navigateTo" data-type="tip" data-tip="触发分享">
								<text class="flex icon2 diygw-col-0 diy-icon-share"></text>
								<view class="diygw-col-0">
									{{ item.share }}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				datas: {
					code: 0,
					msg: '',
					rows: [
						{
							title: '',
							remark: '',
							share: '',
							comment: '',
							star: '',
							src: '',
							avatar: ''
						}
					]
				},
				showVideo: false,
				swipersIndex: 0
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.datasApi();
			},
			// 获取视频接口 API请求方法
			async datasApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = 'https://php.diygw.com/video.php';
				let http_data = {};
				let http_header = {};

				let datas = await this.$http.post(http_url, http_data, http_header, 'json');

				this.datas = datas;
				this.showVideo = true;
				this.$nextTick(() => {
					this.playVideoFunction({});
				});
			},

			// 播放视频 自定义方法
			async playVideoFunction(param) {
				let thiz = this;
				let swipersIndex = this.swipersIndex;
				if (param.detail) {
					swipersIndex = param.detail.current;
				}
				let currentId = 'video' + swipersIndex; // 获取当前视频id
				this.videoContent = uni.createVideoContext(currentId, thiz).play();
				// 获取视频列表
				let rows = this.datas.rows;
				rows.forEach((item, index) => {
					// 获取json对象并遍历, 停止非当前视频
					if (item.src != null && item.src != '') {
						let temp = 'video' + index;
						if (temp != currentId) {
							// 暂停其余视频
							uni.createVideoContext(temp, thiz).pause(); //暂停视频播放事件
						}
					}
				});
			},
			changeSwipers(evt) {
				let swipersIndex = evt.detail.current;
				this.setData({ swipersIndex });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		padding-top: 20rpx;
		color: #ffffff;
		left: 0rpx;
		bottom: 0rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		position: absolute;
		padding-right: 20rpx;
	}
	.text-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex1-clz {
		padding-top: 20rpx;
		color: #ffffff;
		bottom: 200rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		position: absolute;
		right: 0rpx;
		padding-right: 20rpx;
	}
	.flex2-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.image8-clz {
		border-bottom-left-radius: 120rpx;
		overflow: hidden;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
	}
	.image8-size {
		height: 96rpx !important;
		width: 96rpx !important;
	}
	.flex5-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.icon3 {
		font-size: 56rpx;
	}
	.flex3-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.icon1 {
		font-size: 56rpx;
	}
	.flex4-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.icon2 {
		font-size: 56rpx;
	}
	.container21094 {
		padding-left: 0px;
		padding-right: 0px;
		background-color: #000000;
	}
</style>