+
96
-

uniapp有没有仿抖音短视频上下滑动的效果代码?

uni

uniapp有没有仿抖音短视频上下滑动的效果代码?

支持app、h5、小程序的上下滑动观看视频?

网友回复

+
16
-

这个是模仿抖音上下滑屏短视频效果,支持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%

我知道答案,我要回答