最近项目要做一个类似于抖音的一个视频播放 需要小程序完成在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化）在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化）然后就开始啦
思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 （要处理自动播放的问题和加载多个有多个同时播放的问题）
思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 （要处理自动播放的问题和加载多个有多个同时播放的问题）效果图代码




























































data: {

weishipinglist: [],//视频数据

hkindex: 0,//滑块index
},
//动态更新当前滑块下标
bindchange(e) {

this.setData({

hkindex: e.detail.current

})

if (e.detail.current%10 == 7) {

this.chaxunzhi(); //此处是表示在快要加载完了需在分页请求加载

}
},
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;
}
//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条加载第二页数据
完了需要注意的就是一个分页加载 我设置的是7因为我们数据是一页10条 会在第7条加载第二页数据
wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频
wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频总结总结总结