微信小程序仿抖音，微視上下滑動整屏切換視頻帶關注，收藏

廢話不多說直接附代碼

wxml

<!--index.wxml-->
<view class="videoBox">
  <view class="video {{touch==true? 'transfrom' : '' }}" style="transform:translateY(-{{current*100}}%);" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' bindtouchcancel='touchcancel'>
    <view wx:for="{{videoList}}" class='videoitem' wx:key="{{item}}">
      <video src="http://{{item.videoUrl}}" id="videoplayer" bindtimeupdate="videoUpdate" bindtap='videoTap' wx:if="{{current==index}}" object-fit="contain" loop='{{true}}' autoplay='{{true}}' custom-cache="{{true}}" controls='{{false}}' show-progress="{{true}}" show-fullscreen-btn="{{false}}" show-play-btn="{{false}}"
        show-center-play-btn="{{false}}" enable-progress-gesture="{{false}}" vslide-gesture-in-fullscreen="{{false}}" poster="{{item.videoImageUrl}}">
      </video>
      <!--  <image src="http://{{item.videoImageUrl}}" class="preImage" mode='aspectFit'  lazy-load="{{true}}" wx:else></image> -->
  <!-- 右側區域  -->
      <view class='btnBox {{switchTo?"show":"hide"}}'>
        <view class='btnTx' bindtap='{{isFollow==0?"follow":""}}'>
          <image class='TX' src='{{item.headUrl}}'></image>
          <image class='followAdd {{isFollow==0?"show":"hide"}}' src='../../img/followAdd.png'></image>
        </view>
        <view class='btnCollect' bindtap='btnCollect'>
          <image src='../../img/{{isCollect==1?"collect_H":"collect_B"}}.png'></image>
          <text>收藏</text>
        </view>
        <button class='btnShare' open-type='share'>
          <image src='../../img/share.png'></image>
          <text>分享</text>
        </button>
        <view class='btnTelPhone {{oneself?"hide":"show"}}' bindtap='btnTelPhone'>
          <image src='../../img/telPhone.png'></image>
          <text>電話</text>
        </view>
        <view class='btnShut {{oneself?"show":"hide"}}' bindtap='btnShut'>
          <image src='../../img/shut.png'></image>
          <text>關閉</text>
        </view>
      </view>
      <!-- 描述  -->
      <view class='describe {{switchTo?"show":"hide"}}'>
        <view class='nameAddr clearfix'>
          <text class='fl' style="margin-right:10rpx">@{{item.reallyName}}</text>
          <view class='fl addr clearfix'>
            <image class='fl' src='../../img/position.png'></image>
            <text class='fl'>{{item.workProvince}}{{item.workCity}}{{item.workCounty}}</text>
          </view>
        </view>
        <text class="descText">{{item.projectContent}}</text>
        <view class='labelS clearfix'>
          <text wx:for='{{item.tagnamesArr}}' wx:key='{{item}}' wx:for-item="item">#{{item}}</text>
        </view>
      </view>
      <!-- 播放暫停圖標 請換成自己的路徑 -->
      <image class="playImg" src="../../img/icon_short.png" wx:if="{{play}}" bindtap='videoTap'></image>
      <!-- 進度條 -->
      <slider class='{{switchTo?"show":"hide"}}' bindchange="sliderChange" bindchanging="sliderChanging" step="1" block-size='10' value="{{sliderValue}}" backgroundColor="#797979" activeColor="#fff" />
    </view>
  </view>
</view>

wxss

/**index.wxss**/
page{
  height: 100%;
}
.fl{
  float:left;
}
.fr{
  float: right;
}
.hide{
  display: none !important;
}
.show{
  display: block;
}
.videoBox{
  overflow: hidden;
  height: 100%;
  position: relative;
}
.video{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0;
  left: 0;
}
.transfrom{
  transition: transform  0.6s ease-out;
}
.videoitem{
  height: 100%;
  background:#000000;
  position: relative;
}
.videoitem video{
  width: 100%;
  height: 100vh;
}
.preImage{
  display: block;
  width: 100%;
}
/* 右側按鈕 */
.btnBox{
  width: 100rpx;
  position: absolute;
  right: -2%;
  bottom: -2%;
  transform: translate(-50%,-50%);
}
.btnBox image{
  display: block;
}
.btnBox view,.btnBox button{
  margin-bottom: 50rpx;
}
.btnBox button{
  padding: 0;
  background: transparent;
}
.btnBox view image,.btnBox button image{
  margin: 0 auto;
}
.btnBox view text,.btnBox button text{
  line-height: 50rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
}
.btnBox .btnTx{
  position: relative;
}
.btnBox .btnTx .TX{
  width: 94rpx;
  height: 94rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
}
.btnBox .btnTx .followAdd{
  width: 39rpx;
  height: 39rpx;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  overflow: hidden; 
}
.btnBox .btnCollect image{
  width: 54rpx;
  height: 52rpx;
}
.btnBox .btnShare image{
  width: 54rpx;
  height: 43rpx;
}
.btnBox .btnTelPhone image{
  width: 45rpx;
  height: 47rpx;
}
.btnBox .btnShut image{
  width: 49rpx;
  height: 49rpx;
}
/* 詳情描述 */
.describe{
  position: absolute;
  width:75%;
  left:5%;
  bottom:12%;
}
.describe .nameAddr text{
  font-size: 30rpx;
  line-height: 58rpx;
  color: #fff;
}
.describe .addr image{
  width: 22rpx;
  height: 28rpx;
  margin: 15rpx 10rpx 0 0;
}
.describe .descText{
  font-size: 28rpx;
  color: #fff;
  line-height: 38rpx;
}
.describe .labelS text{
  float: left;
  font-size: 28rpx;
  color: #fff;
  line-height: 48rpx;
  margin-right: 10rpx;
}
slider{
  display: 100%;
  width: 100%;
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
}

js

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    videoDetail: '',
    start: 0,
    current: 0,
    startTouch: '',
    startNum:'0',
    //其中的 視頻url(videoUrl) 封面url(videoImageUrl) 頭像url(headUrl) 的話大家自己填上就行
    videoList: [{ "callState": "1", "projectContent": "老鼠炸飛了(ಡωಡ)hiahiahia", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝陽區", "quickProjectWorkerTagName": "電工,接線,砌牆,鋼結構", "headUrl": "", "projectId": "6f1121611a17418cb5d3860b551c9e19", "createDate": "2019-08-22 19:06:39", "reallyName": "大發發", "videoImageUrl": "" }, { "callState": "1", "projectContent": "噠噠噠任汝芬", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝陽區", "quickProjectWorkerTagName": "工裝,圖紙,塔吊,外牆保溫,刮膩子", "headUrl": "", "projectId": "d3b43f21b84b4a75a3321e478f73161f", "createDate": "2019-08-22 10:00:11", "reallyName": "大發發", "videoImageUrl": "" }, { "callState": "1", "projectContent": "韓劇發給他的的", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝陽區", "quickProjectWorkerTagName": "鋪地板,雜工,管理", "headUrl": "", "projectId": "d0e07614d880472bb42937b5688a852f", "createDate": "2019-08-22 09:59:30", "reallyName": "大發發", "videoImageUrl": "" }, { "callState": "1", "projectContent": "感天動地鳳陽花鼓過", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝陽區", "quickProjectWorkerTagName": "外架,澆築,污水處理,打下手,工裝", "headUrl": "", "projectId": "ec16ee6660fe4b1081135897eca2b72a", "createDate": "2019-08-22 09:59:02", "reallyName": "大發發", "videoImageUrl": "" }, { "callState": "1", "projectContent": "大地飛歌幾句話", "employerId": "4224f6e674e346b4a675df4131253fbc", "workCity": "北京市", "workProvince": "北京市", "videoUrl": "", "projectState": "2", "workCounty": "朝陽區", "quickProjectWorkerTagName": "管理,家裝,工裝,裝修,維修,圖紙,支模,外牆,塔吊,外牆保溫", "headUrl": "", "projectId": "2cee997c843d419da30ca7d2a4aca955", "createDate": "2019-08-22 09:58:25", "reallyName": "大發發", "videoImageUrl": "" }], //接口返回的視頻列表。
    touch: false,
    touchStartTime: 0, //觸摸開始時間
    touchEndTime: 0, // 觸摸結束時間
    lastTapTime: 0, // 單擊事件點擊後要觸發的函數
    lastTapTimeoutFunc: null,
    switchTo:true
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    var listTem = that.data.videoList;
    for (var i = 0; i < listTem.length; i++) {
      var arr = (listTem[i].quickProjectWorkerTagName).split(',')
      // console.log(arr)
      listTem[i].tagnamesArr = arr;
    }
    that.setData({
      videoList: listTem
    })
    that.dataList();
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.videoContext = wx.createVideoContext('videoplayer');
    this.setData({
      updateState: true
    })
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },
  dataList: function () {//加載數據
    var that = this;
    wx.request({
      url: '',//把這裏換成自己的接口地址
      data: {
        userId: '',
        start: '',
        limit: 5
      },
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默認值
      },
      success: function (res) {
        console.log(res)
        // console.log(res.data)
        var listTem = that.data.videoList;
        var dataList = res.data;
        //添加新任務列表
        that.setData({
          videoList: listTem.concat(dataList)
        })
        if (res.data.length < 5) {
          that.setData({
            startNum: '0',
            current:0
          })
        }
      }
    })
  },
  // 下面主要模仿滑動事件
  touchstart: function (e) {
    this.setData({
      touchStartTime: e.timeStamp,
      showGuide: false
    })
    let startTouch = e.changedTouches[0]
    this.setData({
      startTouch: startTouch,
      touch: false
    })
  },
  touchmove: function (e) {
    let Y = e.changedTouches[0].pageY - this.data.startTouch.pageY;
  },
  touchend: function (e) {
    this.setData({
      touchEndTime: e.timeStamp
    })
    this.getDirect(this.data.startTouch, e.changedTouches[0])
  },
  touchcancel: function (e) {
    this.getDirect(this.data.startTouch, e.changedTouches[0])
  },
  // 計算滑動方向
  getDirect: function (start, end) {
    var X = end.pageX - start.pageX,
      Y = end.pageY - start.pageY;
    if (Math.abs(X) > Math.abs(Y) && X > 0) {
      console.log("left 2 right");
    }
    else if (Math.abs(X) > Math.abs(Y) && X < 0) {
      console.log("right 2 left");
    }
    else if (Math.abs(Y) > Math.abs(X) && Y > 40) {
      if (this.data.current > 0) {
        this.setData({
          touch: true,
          transitionOver: false
        })
        this.pre()
      } else {
        this.setData({
          current: 0
        })
      }
    }
    else if (Math.abs(Y) > Math.abs(X) && Y < -40) {
      if (this.data.current < this.data.videoList.length - 2) {
        this.setData({
          touch: true
        })
        this.next()
      } else {
        var startNum = parseInt(this.data.startNum) + 5;
        this.setData({
          startNum: startNum,
        })
        this.dataList();
        this.setData({
          current: this.data.videoList.length - 1
        })
      }
    }
  },
  // 播放上一個
  pre: function () {
    this.setData({
      current: this.data.current - 1,
    })
  },

  // 播放下一個
  next: function () {
    this.setData({
      current: this.data.current + 1,
    })
  },
  //點擊暫停/開始
  videoTap: function () {
    //獲取video
    this.videoContext = wx.createVideoContext('videoplayer')
    if (this.data.play) {
      //開始播放
      this.videoContext.play()//開始播放
      this.setData({
        play: false
      })
    } else {
      //當play==false 顯示圖片 暫停
      this.videoContext.pause()//暫停播放
      this.setData({
        play: true
      })
    }
  },
  //播放條時間改表觸發
  videoUpdate(e) {
    if (this.data.updateState) { //判斷拖拽完成後才觸發更新，避免拖拽失效
      let sliderValue = e.detail.currentTime / e.detail.duration * 100;
      this.setData({
        sliderValue: sliderValue,
        duration: e.detail.duration
      })
    }
  },
  sliderChanging(e) {
    this.setData({
      updateState: false //拖拽過程中，不允許更新進度條
    })
  },
  //拖動進度條觸發事件
  sliderChange(e) {
    if (this.data.duration) {
      this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖動後，計算對應時間並跳轉到指定位置
      this.setData({
        sliderValue: e.detail.value,
        updateState: true //完成拖動後允許更新滾動條
      })
    }
  },
})

在對應的頁面添加json

{
  "navigationBarTitleText": "視頻詳情",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": false,
  "navigationStyle": "custom",
  "disableScroll": true
}

希望可以幫助到各位小夥伴，希望對大家有用！！！