ios中picker滑动穿透bug
Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好。
方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制。
data () {
return {
/*---------监听函数--------------*/
handler:function(e){e.preventDefault();}
}
},
// 通过监听蒙层的显隐字段来控制页面滚动的禁用事件 或者在method方法里控制
watch:{
maskShow:function(newvs,oldvs){//picker关闭没有回调函数,所以侦听该属性替代
if(newvs){
this.closeTouch();
}else{
this.openTouch();
}
}
},
methods:{
/*解决iphone页面层级相互影响滑动的问题*/
closeTouch:function(){ /* 弹层出现时调用 */
document.getElementsByTagName("body")[0].addEventListener('touchmove',
this.handler,{passive:false});//阻止默认事件
console.log("closeTouch haved happened.");
},
openTouch:function(){ /* 弹层关闭时调用 */
document.getElementsByTagName("body")[0].removeEventListener('touchmove',
this.handler,{passive:false});//打开默认事件
console.log("openTouch haved happened.");
},
openPicker(){ /* 弹层出现 */
this.openTouch();
},
closePicker(){ /* 弹层关闭 */
this.openTouch();
}
},
方案2:当弹层出现的时候设置body{overflow: hidden;},弹层关闭时设置body{overflow: scroll/auto;}
除了mint-ui的picker,其他库的picker组件可能也会有类似问题。比如vux、weui... 问题产生的原因是一样的,应该同样可以用这个思路解决(目前没测过)。