vue js判断长按触发及手指的上滑、下滑、左滑、又滑

<span class="btn" @touchstart="touchstart()" @touchmove="touchmove()" @touchend="touchend()">按住说话</span>
@touchstart: 触发按下事件
touchstart() {
event.preventDefault() //阻止默认事件(长按的时候出现复制) this.startX = event.changedTouches[0].pageX
this.startY = event.changedTouches[0].pageY
}

  

@touchmove:触发移动事件,通过x轴y轴移动的距离判断是左滑又滑
touchmove() { // 如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
event.preventDefault()
var moveEndX = event.changedTouches[0].pageX
var moveEndY = event.changedTouches[0].pageY
var X = moveEndX - this.startX
var Y = moveEndY - this.startY
if (Math.abs(X) > Math.abs(Y) && X > 0) {
alert('left 2 right')
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
alert('right 2 left')
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
alert('top 2 bottom')
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
alert('bottom 2 top')
} else {
alert('just touch')
}
},

  

 

touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动;X的结果如果负数,则说明手指是从右往左划动;Y的结果如果正数,则说明手指是从上往下划动;Y的结果如果负数,则说明手指是从下往上划动。

但是:

实际上手指在手机上面滑动时很难做到直上直下的滑动;只要稍微有点斜,就会被x轴的判断现行接管,而与我们的实际操作医院相背离。此时就需要添加特殊的判断技巧,代码如下:

@touchend:触发结束移动事件 通过事件判断是否是长按事件
touchend() { // 手释放,如果在500毫秒内就释放,则取消长按事件
event.preventDefault()
this.EndTime = new Date().getTime()
this.isRecord = false if (this.EndTime - this.StarTime < 500) {
this.EndTime = 0
this.StarTime = 0
clearTimeout(this.timeOutEvent)// 清除定时器
alert('取消')
} else {
alert('松手')
wx.stopRecord({
success: function(res) {
alert('localId')
alert(res)
alert(JSON.stringify(res))
this.localId = res.localId
},
fail: function(res) {
alert(JSON.stringify(res))
}
})
}

  

参考文献:https://www.cnblogs.com/lijuntao/p/6479972.html

上一篇:电脑Win7如何取得文件管理所有权(提供各种GHOST版本的Windows)


下一篇:windows下面配合thinkphp5.1.7的nginx.conf内容