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 路由页面之间实现用手指进行滑动的方法
- vue移动端的左右滑动事件详解
- vue移动端实现手机左右滑动入场动画
- Vue实现移动端左右滑动效果的方法
- vue2.0移动端滑动事件vue-touch的实例代码
- vue自定义移动端touch事件之点击、滑动、长按事件
- 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
- vue2.0 better-scroll 实现移动端滑动的示例代码
- vue实现一个移动端屏蔽滑动的遮罩层实例
本文由 华域联盟 原创撰写:华域联盟 » vue移动端判断手指在屏幕滑动方向
转载请保留出处和原文链接:https://www.cnhackhy.com/73343.htm