微信小程序如何实现抖音上下滑动切换短视频的布局效果？

有，这样的

wxml代码

<view class="video-contain">
  <!-- 自定义头部 -->
  <cover-view class="nav-myself" style="height:{{navigationBarHeight+'px'}}">
    <cover-view class="status-title" style="height:{{statusBarHeight+'px'}}"></cover-view>
    <cover-view class="title-content">
      <cover-view class="back" bindtap="goback" ><cover-image src="http://repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png"></cover-image></cover-view>
    </cover-view>
  </cover-view>
  <!-- 滑动遮罩 -->
  <cover-view class="touch-cover" bindtouchstart="touchStart" bindtouchend="touchEnd" bindtap='changeStatus'>
  </cover-view>
  <!-- 暂无数据 -->
  <view wx:if="{{!lists.length&&!isLoading}}" >
    <no-data type="common" txt="暂无数据"></no-data>
  </view>
   <swiper vertical="true" skip-hidden-item-layout="{{true}}"  loop="{{true}}" current="{{swiperCurrent}}" 
   circular="{{true}}">
      <swiper-item wx:for="{{lists}}" wx:key="item" wx:if="{{lists.length>0}}">
        <video src="{{item.url}}" objectFit="fill" autoplay controls="{{false}}"  loop="{{true}}" id="video{{item.id}}"  data-id="{{item.id}}" custom-cache="{{false}}"></video>
      </swiper-item> 
    </swiper>
    <!-- 右侧工具 -->
    <cover-view class="tools" wx:if="{{lists.length}}">
        <cover-image src="http://repo.bfw.wiki/bfwrepo/icon/5ff8f1528e5f1.png" class="home-icon right-icon" bindtap='goList'></cover-image>
      <button open-type="share" class="share-button">
          <cover-image class="share-icon right-icon" src="http://repo.bfw.wiki/bfwrepo/image/5ff8ee1070a63.png"></cover-image>
      </button>
    </cover-view>
    <!-- 暂停按钮 -->
    <cover-image class="play-btn" wx:if="{{!playState}}" bindtap='changeStatus' src="http://repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png"></cover-image>
    <!-- 商品信息 -->
    <cover-view class="video-goods" bindtap='goDeatil' wx:if="{{lists.length>0}}">
      <cover-image src="http://repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></cover-image>
      <cover-view class="goods-right">
        <cover-view class="title">秋季衣服</cover-view>
        <cover-view class="goods-price">
          <cover-view class="price">
            <cover-view style="color:rgb({{themeColor.mainColor}});font-size:36rpx">¥11.00
            </cover-view>
            <cover-view class="market-price" style='width:100%'>
            <cover-view class="market-box">
              ¥22.00<cover-view class="hidden-box">一</cover-view>
              <cover-view class="line"></cover-view>
            </cover-view>
            </cover-view>
          </cover-view>
          <cover-view class="goBuy" style='background:red;'>立即抢购</cover-view>
      </cover-view>
    </cover-view> 
  </cover-view>

      <!-- 轮播购买记录 -->
    <view class="buy-info" >
      <swiper indicator-dots="{{false}}" autoplay="true"  vertical circular style="height:270rpx">
        <block>
          <swiper-item >
            <view class="item-li" >
              <image src="http://repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" ></image>
              <text>购买了2件</text>
            </view>
          </swiper-item>
          <swiper-item >
            <view class="item-li" >
              <image src="http://repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" ></image>
              <text>购买了5件</text>
            </view>
          </swiper-item>
          <swiper-item >
            <view class="item-li" >
              <image src="http://repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" ></image>
              <text>购买了3件</text>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view> 

</view>

json代码

{
  "usingComponents": {},
  "backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FFFFFF",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "抖音",

 "navigationStyle": "custom"

}

wxss代码

/* pages/Main/myVideo/index.wxss */
page{
  width: 100%;
  height: 100%;
}
.video-contain{
  width: 100%;
  height: 100%;
}
swiper{
  height: 100%;
  width: 100%;
}
swiper video{
  width: 100%;
  height: 100%;
}
.touch-cover{
  width: 100%;
  height: 100%;
  positi...

点击查看剩余70%