1、wxml部分代码 ,主要是利用swiper 标签滑动切换,事件处理,具体参数说明可以去小程序官网文档看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper
vertical="{{true}}"
current="{{current}}"
circular="{{false}}"
bindchange="bindchange"
easing-function="default">
<block wx:for="{{videoList}}" wx:key="*this" wx:for-index="i">
<swiper-item>
<view class="swiper-item">
<video
bindtap="clickVideo"
object-fit="cover"
id="video_{{i}}"
show-fullscreen-btn="{{false}}"
autoplay="{{i==0 && firstRequest}}"
wx:if="{{i>current-2 && current+2>i}}"
loop="{{true}}"
src="{{item.video_url}}"
class="video-dom">
</video>
<!-- i>current-2 && current+2>i 这个判断的作用是,加载当前视频和前面一个和后面一个视频资源, 不多加载,做到按需加载,节流-->
<!-- autoplay="{{i==0 && firstRequest}}" 首次打开的时候,第一个视频自动播放,其它的滑动的时候触发播放 -->
</view>
</swiper-item>
</block>
</swiper>
2、js 部分
Page({
/**
* 页面的初始数据
*/
data: {
isPlay:true,
video_id:"video_0",
videoList:[],
pageShow:false,
current:0, // 当前滑块
vertical:false, // 滑块方向
offset:0,
page_index:1,
firstRequest:true,
isRequest:true, // 是否正在发起请求,控制不会多次滑动出发接口请求多次问题
page_count:5,
isHaveData:true // 判断接口返回的还有没有数据,没有设置成false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getShortVideo();
},
// current 改变时会触发 change 事件
bindchange(e){
this.setData({
current: e.detail.current
})
this.swiperVideo(e);
if(this.data.isHaveData && e.detail.current >= this.data.videoList.length-2 && !this.data.isRequest){
this.setData({
page_index: this.data.page_index+1
},res=>{
this.setData({
offset: (this.data.page_index-1) * this.data.page_count,
isRequest: true,
})
this.getShortVideo();
})
}
},
// 点击视频暂停活播放
clickVideo(e){
//这里的vid是视频的id,因为这里我是用接口传数据的,里面有视频id
let vid = e.currentTarget.id;
let indexVideoContext = wx.createVideoContext(vid)
if(this.data.isPlay){
indexVideoContext.pause();
}else{
indexVideoContext.play();
}
this.setData({
isPlay: !this.data.isPlay
})
},
// 获取视频列表
getShortVideo(){
wx.cloud.callFunction({
name:"short-video",
data:{
type:"checkList",
offset: this.data.offset,
page_count: this.data.page_count
}
}).then(res=>{
console.log(res)
if(this.data.page_index==1){
this.setData({
indexVideo:res.result.list[0]
})
}
// 请求接口的数据和每次获取条数如果不相等,说明后面已经没有数据了 isHaveData: false
if(res.result.list.length!=this.data.page_count){
this.setData({
isHaveData:false
})
}
this.setData({
isRequest: false,
videoList: [ ...this.data.videoList, ...res.result.list],
})
})
},
// 滑动切换视频
swiperVideo(e){
//这里的vid是视频的id,因为这里我是用接口传数据的,里面有视频id
let vid = `video_${e.detail.current}`;
// 上个一视频id
var prev_id = this.data.video_id;
// 停止山一个视频播放
wx.createVideoContext(prev_id).pause();
this.setData({
firstRequest:false,
video_id:vid,
isPlay:true
})
// 延迟500ms,再播放本视频
setTimeout(function(){
wx.createVideoContext(vid).play();
},500)
},
})
以上是主要代码部分,如有不明白的留言,相互探讨交流
(完结)
下面是我的小程序实现的效果,可以扫码看看