在使用mint-ui的弹窗时,滚动弹窗内部分区域,会导致页面滚动。
我测试的时候是安卓和苹果使用picker时都有这个问题;使用datetime picker时只有苹果会出现这个问题。
我看了下源码,发现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(val) {
this.closeTouch()
} else {
this.openTouch()
}
}
}
这样就解决了使用picker时穿透滚动的问题。
但是datetime picker呢,datetime picker不能监听属性判断窗口是否关闭,没有这个属性暴露出来,我们看看官方文档:
是不是想到了在打开时间选择器和点击确定confirm时做这两个事情。但是我们又会发现其他的问题,关闭弹出层不止有确定confirm一个操作能实现,点击蒙版层区域和点击取消也能关闭弹出层。但是api里并没有给出 控制是否能点击蒙版层区域关闭窗口的属性 和 取消事件。
那我们再去看下源码:
发现了这个!!!其实是有控制是否能点击蒙版层区域关闭窗口的属性的,只不过官方文档没写出来。因为点击蒙版层关闭弹出层我们捕捉不到这个变化,所以这里我们把它设置成false。
我们继续看看:
也是有取消事件的! 那我们现在在点击cancel事件和confirm事件上都加上 openTouch 方法,在控制打开时间选择器的地方加上 closeTouch 方法。
这样我们的问题就解决啦(*^▽^*)。 想偷偷吐槽下官方文档写的太简洁了吧,省略了好多东西。