解決方法：禁止自帶的滑動(dòng)冠句，自定義滑動(dòng)
<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() // 阻止默認(rèn)的處理方式(阻止下拉滑動(dòng)的效果)
},
{ passive: false }
) // passive 參數(shù)不能省略筝野，用來(lái)兼容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()
// 計(jì)算手指偏移量
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
}
