需求: 在“subat视频”微信小程序首页实现播放完一个视频后继续播放下一个视频并自动scroll到当前播放的视频。
实现思路: 播放下一个视频当然不是问题,获取当前视频index并找出下一个视频,播放就可以了。
问题:问题就是上面提到的需求。
解决方案: 在视频列表给每个视频设个id,然后通过官方提供的SelectorQuery wx.createSelectorQuery()wx.pageScrollTo(Object object)来实现。
具体实现函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
scrollToVideo(videoId){
if(videoId){
const query = wx.createSelectorQuery();
query.select('#video-'+videoId).boundingClientRect();
query.selectViewport().scrollOffset();
console.log(query,'query');
query.exec((res)=> {
console.log(res,'res');
// res[0].top // #the-id节点的上边界坐标
// res[1].scrollTop // 显示区域的竖直滚动位置
wx.pageScrollTo({
scrollTop: res[1].scrollTop+res[0].height,
duration: 300
})
})
}
}