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%


