微信小程序（实现抖音播放效果）上下滑动全屏播放效果

最近项目要做一个类似于抖音的一个视频播放 需要小程序完成

在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化然后费了好大的劲优化了下 也不是优化了下事吧所有有问题的都该了下 梳理了下逻辑 然后选了个最合适的方案 给大家参考）

然后就开始啦

思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 （要处理自动播放的问题和加载多个有多个同时播放的问题）

另外需要说明下 官方有扩展插件《video-swiper》不过这个把他不好去扩展然后不能有浮窗什么的 因为我的需要礼物和评论什么的转发什么的模块 （可参考）

效果图

代码

<swiper class="swiper" vertical='true' easing-function='default' bindchange='bindchange'>
	<block wx:for="{{weishipinglist}}" wx:for-item="key" wx:key="*this">
		<swiper-item>
			<view class="video-wrap">  
			     	<video wx:if="{{index==hkindex||index==hkindex-1||index==hkindex+1}}" show-center-play-btn="{{false}}"  id="myvideo{{index}}" class="video" src="{{key.videoid}}" loop show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture controls="{{false}}" bindpause="bindpause" bindplay="bindplay"></video>
    <button class="buy" bindtap="click">{{index}}</button> 
				 	 <!-- 这块用来写标题头像什么的 用 cover-view  cover-等等 -->
         	</view>
		</swiper-item>
	</block>
</swiper>

 data: {
    weishipinglist: [],//视频数据
    hkindex: 0,//滑块index
  },
  //动态更新当前滑块下标
  bindchange(e) {
    this.setData({
      hkindex: e.detail.current
    })
    let videoContext = wx.createVideoContext("myvideo" + e.detail.current + "")
    let videoContexta = wx.createVideoContext("myvideo" + indx + "")  
    indx = e.detail.current;
    videoContexta.pause();
    videoContexta.seek(0);
    videoContext.play();
    let xz = this.data.weishipinglist.length- e.detail.current ;
    if (xz == 3) {
      this.chaxunzhi();  //加载更多视频
    }
    this.qingygnanme();
  },

//css代码可能有多余的  我就不挑了 引入时自己按需引入吧

page {
  width: 100%;
  height: 100%;

}

.video-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 1px dashed red; */
}

.video-wrap video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1;
}

.video-wrap .buy {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50%;
  position: absolute;
  z-index: 100;
  bottom: 100rpx;
  left: 50rpx;
  font-size: 11pt;
  text-align: center;
  padding: 0px;
}

.swiper {
  width: 100%;
  height: 100%;
}

.tentbiaot {
  width: 400rpx;
  font-size: 30rpx;
  color: #fff;
  z-index: 99;
  white-space: normal;
  line-height: 40rpx;
  margin-top: 20rpx;
}

.diwen {
  width: 400rpx;
  color: #fff;
  z-index: 99;
  display: flex;
  align-items: center;
}

.toixaign {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50rpx;
  margin-right: 10rpx;
}

.teiename {
  font-size: 34rpx;
  margin-right: 10rpx;
}

.diwe {
  display: flex;
  position: fixed;
  bottom: 100rpx;
  flex-direction: column;
  z-index: 99;
  left: 40rpx;
}


.dianzaidijila {
  width: 100rpx;
  position: fixed;
  right: 30rpx;
  bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}

.tuaobiao {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 30rpx;
}

.tobimg{
  width: 60rpx;
  height: 50rpx;
}

.tobimglw{
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.zitiet{
  color: #fff;  
  font-size: 26rpx;
  margin-top: 6rpx;
}

.zhaunfanan {
  width: 60rpx;
  height: 50rpx;
  padding: 0rpx;
  border: none !important;
  line-height: 0rpx;
}

.zhaunfananas {
  width: 60rpx;
  height: 50rpx;
}

完了需要注意的就是一个分页加载 我设置的是8因为我们数据是一页10条 会在第8条加载第二页数据

最近疫情严重各位小伙伴保重好身体哦~