现象:h5页面的弹出层在ios中滚动会触发底层页面的滚动
原因:touchmove事件的默认行为未阻止
解决:阻止touchmove事件的默认行为
vue代码如下:popupVisible(type:Boolean)变量控制弹出层
watch: {
// 如果 `question` 发生改变,这个函数就会运行
popupVisible(newQuestion, oldQuestion) {
this.popupVisible ? this.closeTouch() : this.openTouch()
}
},
methods: {
closeTouch() {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })// 阻止默认事件
},
openTouch() {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })// 打开默认事件
},
handler(e) {
e.preventDefault()
}
}