vue实现上下滑动翻页_vue上下滑动翻页组件

最新推荐文章于 2023-08-24 14:48:33 发布

weixin_39667797

最新推荐文章于 2023-08-24 14:48:33 发布

阅读量709

点赞数

文章标签： vue实现上下滑动翻页

本文链接：https://blog.csdn.net/weixin_39667797/article/details/111484903

版权

该博客介绍了一个Vue组件，用于实现上下滑动翻页功能。通过监听触摸事件，计算滑动距离和方向，实现了根据用户上滑或下滑操作切换页面的效果。组件接受距离和方向两个props参数，并在滚动结束后触发`pageChange`事件，传递当前和前一个页面索引。

摘要由CSDN通过智能技术生成

var windowHeight = document.documentElement.clientHeight||window.innerHeight;var windowWidth =document.documentElement.clientWidth||window.innerWidth;

exportdefault{

data:function() {return{

preIndex:0,

curIndex:0,

startX:0,

startY:0,

endX:0,

endY:0,

len:0,

width:'',

height:'',

isDown:false,

num:this.direction.indexOf('reverse')>-1?-1:1,

distance:50,

}

props:{//距离

distance:{

type: Number,default:50},//方向

direction:{

type: String,default:'column'//row|row-reverse|column|column-reverse

mounted:function() {this.scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;this.scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;this.len=this.$refs.hei.children.length;if(this.direction==='row'||this.direction==='row-reverse'){this.width=this.len*windowWidth+'px';this.height=windowHeight+'px';

}else{this.width=windowWidth+'px';this.height=this.len*windowHeight+'px';

}

window.addEventListener('touchstart', this.touchstart);

window.addEventListener('touchmove', this.touchmove);

window.addEventListener('touchend', this.touchend);this.$nextTick(()=>{if(this.direction==='row'||this.direction==='row-reverse') {this.curIndex=Math.round(this.scrollLeft/windowWidth)

}else{this.curIndex=Math.round(this.scrollTop/windowHeight)

}

})

methods:{

touchstart (e) {this.isDown=true;this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;

touchmove(e){if(!this.isDown){this.isDown=true;this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;return;

}else{this.endX = e.touches[0].clientX;this.endY = e.touches[0].clientY;

}

touchend() {if(!this.isDown){return;

}this.isDown=false;this.preIndex=this.curIndex;if(this.direction==='row'||this.direction==='row-reverse'){if(this.startX-this.endX>this.distance){this.curIndex=this.curIndex+this.num;

}else if(this.startX-this.endX

}

window.scrollTo({

left:this.curIndex*windowWidth,

behavior:'smooth'})

}else{if(this.startY-this.endY>this.distance){this.curIndex=this.curIndex+this.num;

}else if(this.startY-this.endY

}

window.scrollTo({

top:this.curIndex*windowHeight,

behavior:'smooth'})

}if(this.curIndex>this.len-1){this.curIndex=this.len-1;