微信小程序实现抖音播放效果的实例代码

(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )

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

在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅卡顿什么的优化不好优化）

然后就开始啦

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

效果图

代码

<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}}" class="video" autoplay="{{true}}" lopp='{{true}}' src="/UploadFiles/2021-04-02/{{key.videoid}}">



data: {
  weishipinglist: [],//视频数据
  hkindex: 0,//滑块index
 },
 //动态更新当前滑块下标
 bindchange(e) {
  this.setData({
   hkindex: e.detail.current
  })
  if (e.detail.current%10 == 7) {
   this.chaxunzhi(); //此处是表示在快要加载完了需在分页请求加载
  }
 },




//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;
}



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

wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频

总结

上一篇：JS实现随机点名器
下一篇：JS中间件设计模式的深入探讨与实例分析