中建交通建设集团有限公司网站,wordpress单本小说采集,wordpress异步上传图片,腾讯wordpressDIY可视化实现仿抖音短视频代码生成器#xff0c;仿抖音短视频兼容uniapp、微信小程序 丝滑切换视频效果#xff0c;无限数据加载不卡顿#xff0c;高性能滑动不卡顿超流畅#xff0c;观看视频丝滑切换#xff0c;页面内容自定义#xff0c;无限数据加载不卡顿。
在线设…DIY可视化实现仿抖音短视频代码生成器仿抖音短视频兼容uniapp、微信小程序 丝滑切换视频效果无限数据加载不卡顿高性能滑动不卡顿超流畅观看视频丝滑切换页面内容自定义无限数据加载不卡顿。
在线设计请求远程数据源绑定数据源、视频源、标题等。所有界面上的元素都支持在线自定义。
在线请求API templateview classcontainer container21094view classflex diygw-col-24swiper :currentswipersIndex animationfinishplayVideoFunction classswiper changechangeSwipers indicator-colorrgba(51, 51, 51, 0.39) indicator-active-colorrgba(64, 64, 64, 0.93) interval3000 verticaltrue circulartrue styleheight: 100vhswiper-item v-for(item, index) in datas.rows :keyindex classdiygw-swiper-itemview classdiygw-swiper-item-wrapview classflex diygw-col-24video refrefVideo :idvideo index :controlsfalse :show-center-play-btntrue :show-play-btnfalse :show-fullscreen-btnfalse :srcitem.src stylewidth: 100%; height: 100vh object-fitcontain :titleitem.title poster/video/viewview classflex flex-wrap diygw-col-24 flex-direction-column flex-clzview classdiygw-col-24 text-clz{{ item.title }}/viewview classdiygw-col-24{{ item.remark }}/view/viewview classflex flex-wrap diygw-col-0 flex-direction-column flex1-clzview classflex flex-wrap diygw-col-24 flex-direction-column items-center flex2-clzimage :srcitem.avatar classimage8-size diygw-image diygw-col-0 image8-clz modewidthFix/image/viewview classflex flex-wrap diygw-col-24 flex-direction-column items-center flex5-clz tapnavigateTo data-typetip data-tip触发收藏text classflex icon3 diygw-col-0 diy-icon-star/textview classdiygw-col-0{{ item.star }}/view/viewview classflex flex-wrap diygw-col-24 flex-direction-column items-center flex3-clz tapnavigateTo data-typetip data-tip触发消息text classflex icon1 diygw-col-0 diy-icon-message/textview classdiygw-col-0{{ item.comment }}/view/viewview classflex flex-wrap diygw-col-24 flex-direction-column items-center flex4-clz tapnavigateTo data-typetip data-tip触发分享text classflex icon2 diygw-col-0 diy-icon-share/textview classdiygw-col-0{{ item.share }}/view/view/view/view/swiper-item/swiper/viewview classclearfix/view/view
/templatescriptexport 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; // 获取当前视频idthis.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 });}}};
/scriptstyle langscss 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
