uniapp有没有仿抖音短视频上下滑动的效果代码?
支持app、h5、小程序的上下滑动观看视频?
网友回复
这个是模仿抖音上下滑屏短视频效果,支持pc端浏览器操作、手机端h5滑动操作、app端、各个平台小程序,带右侧操作按钮及标题评论显示,滑动到只剩下三个视频的时候主动请求服务端获取新的视频,为了提高性能,同一时间只会创建三个video标签,上一个,现在播放的、还有下一个视频,这也是为了增加用户体验,上下切换非常丝滑,可转换为其他小程序或app、h5页面,全平台兼容。
代码如下:
<template> <view style="height:100%;"> <swiper class="swiper" vertical="true" easing-function="default" @change="bindchange" @tap="videohandle"> <block v-for="(key, index) in shortvideolist" :key="index"> <swiper-item> <view class="video-wrap"> <cover-image v-if="!playing" style class="playiconimg" src="https://repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png"></cover-image> <video v-if="index==hkindex||index==hkindex-1||index==hkindex+1" :show-center-play-btn="false" :id="'myvideo' + index" class="video" :src="key.videourl" loop :show-fullscreen-btn="false" :show-play-btn="false" object-fit="cover" enable-play-gesture :controls="false" @pause="bindpause" @play="bindplay"></video> <cover-view v-if="index==hkindex||index==hkindex-1||index==hkindex+1" class="title"> <cover-view>@美好旅行官</cover-view> <cover-view>好美的风景啊,这想去看看!!</cover-view> </cover-view> <!-- 这块用来写标题头像什么的 用 cover-view cover-等等 --> <cover-view class="icon-container" v-if="index==hkindex||index==hkindex-1||index==hkindex+1"> <cover-view class="cover-view-item avatar-cont"> <cover-image class="video-icon avatar" src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90"></cover-image> <cover-image class="focus" src="//repo.bfw.wiki/bfwrepo/icon/6229edf792f1f.png"></cover-image> </cover-view> <cover-view class="cover-view-item" @tap.stop="love"> <cover-image class="video-icon" :src="islove?'//repo.bfw.wiki/bfwrepo/icon/5d834be1e8f47.png':'//repo.bfw.wiki/bfwrepo/icon/5ff8f1528e5f1.png'"></cover-image> <cover-view class="text-white">1.1k</cover-view> </cover-view> <cover-view class="cover-view-item" @tap.stop="comment"> <cover-image class="video-icon" src="//repo.bfw.wiki/bfwrepo/icon/6229e8c7dbc82.png"></cover-image> <cover-view class="text-white">1.1k</cover-view> </cover-view> <cover-view class="cover-view-item" @tap.stop="share"> <cover-image class="video-icon" src="//repo.bfw.wiki/bfwrepo/image/5ff8ee1070a63.png"></cover-image> <cover-view class="text-white">1.1k</cover-view> </cover-view> </cover-view> </view> </swiper-item> </block> </swiper> <cover-view class="topbar"> <cover-view>首页</cover-view> <cover-view style="font-weight: bold;color: white;">推荐</cover-view> <cover-view>关注</cover-view> </cover-view> <cover-view v-if="showcomment" style="z-index: 11111;position: absolute;bottom: 0;left: 0;color: white;background-color: red;width: 100%;"> <cover-view> <cover-view class="cu-dialog" style="width:100%;height: 100%;"> <cover-view class="cu-bar bg-white"> <cover-view class="action text-grey">共12条评论</cover-view> <cover-view class="action text-red " @tap="hideModal">关闭</cover-view> </cover-view> <cover-view class="padding-sm"> <cover-view class="cu-list menu-avatar"> <cover-view class="cu-item flex"> <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image> <cover-view class="content flex-sub" style="margin-right: 100rpx;"> <cover-view class="text-grey padding">正义天使 凯尔</cover-view> <cover-view class="text-gray text-sm flex justify-between padding-left "> 十天前 </cover-view> </cover-view> <cover-view class="text-gray text-sm padding text-center fr"> 30 <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image> </cover-view> </cover-view> </cover-view> <cover-view class="cu-list menu-avatar"> <cover-view class="cu-item flex"> <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image> <cover-view class="content flex-sub" style="margin-right: 100rpx;"> <cover-view class="text-grey padding">正义天使 凯尔</cover-view> <cover-view class="text-gray text-sm flex justify-between padding-left "> 十天前 </cover-view> </cover-view> <cover-view class="text-gray text-sm padding text-center fr"> 30 <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image> </cover-view> </cover-view> </cover-view> <cover-view class="cu-list menu-avatar"> <cover-view class="cu-item flex"> <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image> <cover-view class="content flex-sub" style="margin-right: 100rpx;"> <cover-view class="text-grey padding">正义天使 凯尔</cover-view> <cover-view class="text-gray text-sm flex justify-between padding-left "> 十天前 </cover-view> </cover-view> <cover-view class="text-gray text-sm padding text-center fr"> 30 <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image> </cover-view> </cover-view> ...
点击查看剩余70%