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>
