解决方法：禁止自带的滑动，自定义滑动
<div
class="sticky-table"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
></div>
// 禁止
mounted() {
let u = navigator.userAgent
if (u.indexOf('iPhone') > -1) {
let element: any = document.querySelector('.sticky-table')
element.addEventListener(
'touchmove',
function (e: any) {
e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
},
{ passive: false }
) // passive 参数不能省略，用来兼容ios和android
}
}
// 自定义
touchstart(event: any) {
event.preventDefault()
this.touchX = event.changedTouches[0].clientX
this.touchY = event.changedTouches[0].clientY
}
touchmove(event: any) {
let element: any = document.querySelector('.sticky-table')
event.preventDefault()
// 计算手指偏移量
const offsetX = event.changedTouches[0].clientX - this.touchX
const offsetY = event.changedTouches[0].clientY - this.touchY
element.scrollLeft = element.scrollLeft - offsetX
element.scrollTop = element.scrollTop - offsetY
this.touchX = event.changedTouches[0].clientX
this.touchY = event.changedTouches[0].clientY
}
touchend(event: any) {
event.preventDefault()
this.touchX = event.changedTouches[0].clientX
this.touchY = event.changedTouches[0].clientY
}
