vue 左滑指令，曲面屏手机 上滑也会触发左滑 有人遇到这个问题？
0
[待解决问题]
// eslint-disable-next-line no-unused-vars
const touchSlide = (el, binding, _vNode) => {
const touchType = binding.arg // 传入的模式 press swipeRight swipeLeft swipeTop swipeDowm Tap
let timeOutEvent = null
let direction = ''
// 滑动处理
// eslint-disable-next-line one-var
let startX = 0
let startY = 0
// 返回角度
function GetSlideAngle (dx, dy) {
return (Math.atan2(dy, dx) * 180) / Math.PI
}
// 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection (startX1, startY1, endX, endY) {
const dy = startY1 - endY
const dx = endX - startX1
let result = ''
// 如果滑动距离太短
if (Math.abs(dx) < 150 && Math.abs(dy) < 150) {
return result
}
const angle = GetSlideAngle(dx, dy)
if (angle >= -45 && angle < 45) {
result = 'swiperight'
} else if (angle >= 45 && angle < 135) {
result = 'swipeup'
} else if (angle >= -135 && angle < -45) {
result = 'swipedown'
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 'swipeleft'
}
return result
}
el.addEventListener(
'touchstart',
(ev) => {
startX = ev.touches[0].pageX
startY = ev.touches[0].pageY
// 判断长按
timeOutEvent = setTimeout(() => {
timeOutEvent = null
if (touchType === 'press') {
binding.value()
}
}, 500)
},
false
)
// eslint-disable-next-line no-unused-vars
el.addEventListener('touchmove', () => {
clearTimeout(timeOutEvent)
timeOutEvent = 0
})
el.addEventListener(
'touchend',
(ev) => {
const endX = ev.changedTouches[0].pageX
const endY = ev.changedTouches[0].pageY
direction = GetSlideDirection(startX, startY, endX, endY)
clearTimeout(timeOutEvent)
switch (direction) {
case '0':
break
case 'swipeup':
if (touchType === 'swipeup') {
binding.value()
}
break
case 'swipedown':
if (touchType === 'swipedown') {
binding.value()
}
break
case 'swipeleft':
if (touchType === 'swipeleft') {
binding.value()
}
break
case 'swiperight':
if (touchType === 'swiperight') {
binding.value()
}
break
default:
}
},
false
)
}
export default touchSlide
所有回答(1)
0
你的代码主要是一个 Vue 指令，用于处理移动端触摸滑动事件。在曲面屏手机上可能会遇到上滑触发左滑的问题，这可能是因为在曲面屏上触摸滑动的事件不够精准，导致计算滑动方向时产生错误。
在你的 touchend 事件处理函数中，你通过计算起点和终点的角度来判断滑动的方向。由于角度计算可能受到曲面屏的影响，可能会出现不准确的情况。这可能是导致上滑触发左滑的原因之一。
为了解决这个问题，你可以尝试使用更稳定的滑动方向判断方式，例如通过判断横向和纵向的滑动距离来确定方向。以下是一种修改的方式：
javascript
Copy code
function GetSlideDirection(startX1, startY1, endX, endY) {
const dy = startY1 - endY;
const dx = endX - startX1;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 50) {
return '0'; // 如果滑动距离太短，可以根据实际情况调整阈值
}
if (Math.abs(dx) > Math.abs(dy)) {
return dx > 0 ? 'swiperight' : 'swipeleft';
} else {
return dy > 0 ? 'swipeup' : 'swipedown';
}
}
这里使用了直角三角形的斜边距离作为滑动距离，然后判断横向和纵向的滑动距离来确定方向。这种方式可能对于曲面屏手机上的滑动事件更加稳定。
你可以根据实际情况调整阈值和滑动距离的计算方式，以适应不同的设备。希望这个修改能够帮助你解决问题。
