在使用mint-ui的弹窗时,滚动弹窗内部分区域,会导致页面滚动。
我测试的时候是安卓和ios使用picker时都有这个问题;使用datetime picker时只有ios会出现这个问题。
我看了下源码,发现datetime picker的弹窗是引用的picker的组件,emmmm...,有点奇怪同一个组件在安卓上显示还不一样。
那我们先来看下解决办法吧,解决办法主要参考这里:
思路很简单,就是弹出层打开时禁止body的滚动事件,弹出层关闭时恢复body的滚动事件
//Vue数据变量区域
data(){
/*---------监听函数--------------*/
handler: function(e){
e.preventDefault()
}
},
//Vue函数方法区域
methods:{
/*解决页面层级相互影响滑动的问题*/
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
}
}
在打开窗口时调用closeTouch方法,关闭弹出窗口时调用openTouch方法
//侦听属性
watch: {
//picker关闭没有回调函数,所以侦听该属性替代
popupHandleVisible (val){
if(v