|
效果图：
一、外层
1.通过swiper 并设置vertical='true'实现纵向滑动效果 同时设置circular为true实现循环滑动
2.设置三个swiper-item 通过调节index下标 用以前后视频的预加载与请求 同时设置好id 以便于使用this.$ref调用相应PlayItem内的方法
复制代码
3.使用@touchstart="start" @touchend="end"获取对应的滑动起始坐标 判断是上滑下滑
//data内
//滑动监听
startData: {
clientY: "",
clientX: "",
},
endData: {
clientY: "",
clientX: "",
},
//methods内
start(e){
this.startData.clientX = e.changedTouches[0].clientX;
this.startData.clientY = e.changedTouches[0].clientY;
},
end(e){
this.endData.clientX = e.changedTouches[0].clientX;
this.endData.clientY = e.changedTouches[0].clientY;
},
// swiper切换时判断上滑下滑 以及控制PlayItem内的video播放与暂停
swiperChange(e){
// sweiper切换 控制video播放与暂停
for(var i=0;i30){
console.log('上滑')
}
if(subY |