风景优美的黄山景区,一年四季游人如织。蜀僧抱绿绮,西下峨眉峰。为我一挥手,如听万壑松。客心洗流水,馀响入霜钟。不觉碧山暮,秋云暗几重。
vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下
可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现
页面
<div @touchstart="handleTouchstart" @touchend="handleTouchend" class="slotWrap" >
//屏幕滑动 //手指按下屏幕 handleTouchstart(event){ this.startTime = Date.now() this.startX = event.changedTouches[0].clientX this.startY = event.changedTouches[0].clientY }, //手指离开屏幕 handleTouchend(event){ const endTime = Date.now() const endX = event.changedTouches[0].clientX const endY = event.changedTouches[0].clientY //判断按下的时长 if(endTime - this.startTime >2000){ return } //滑动的方向 let direction = ""; //先判断用户滑动的距离,是否合法,合法:判断滑动的方向 注意 距离要加上绝对值 if(Math.abs(endX -this.startX)>10){ //滑动方向 if(Math.abs(endY -this.startY)>30){ // console.log("y方向偏移太多,不让你滑了") return }else{ direction = endX -this.startX >0?"right":"left" } }else{ return } //用户做了合法的滑动操作 // console.log('方向'+direction) if(direction==='left'){ if(this.currents+1===this.list.length){ return }else{ this.currents++ //触发事件 this.$emit('getData') } } if(direction==='right'){ if(this.currents===0){ return }else{ this.currents-- //触发事件 this.$emit('getData') } } }
到此这篇关于vue移动端判断手指在屏幕滑动方向就介绍到这了。一个人有生就有死,但只要你活着,就要以最好的方式活下去。更多相关vue移动端判断手指在屏幕滑动方向内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!