Vue2.0-mint-ui解决移动端苹果手机有滚动穿透的问题

最新推荐文章于 2024-07-25 15:53:48 发布

原创

最新推荐文章于 2024-07-25 15:53:48 发布 · 5.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #滚动穿透 #Vue2.0 #mint-ui

本文介绍了在Vue2.0项目中使用mint-ui时遇到的苹果手机滚动穿透问题，该问题表现为弹窗选择时底部页面出现滚动效果。问题源于滚动穿透现象，解决方案是通过弹出层打开时禁止body的滑动事件，关闭时恢复。文中提供了具体的Vue2.0代码实现，包括在data中定义方法以及在弹出层打开和关闭时调用相应的方法来处理popup和datetime-picker的滚动事件。

1.遇到的问题：使用mint-ui的弹窗选择时底部页面会出现滚动效果（仅出现在苹果手机，安卓手机，pc端正常）

2.问题原因：滚动穿透，这是啥，我也不懂

3.解决方式：参考文档，了解下：https://blog.youkuaiyun.com/weixin_40126227/article/details/80858990

思路就是弹出层打开的时候禁止body的滑动事件，弹出层关闭恢复body的滑动事件

由于使用的是Vue2.0，所以修改了语法，详见代码

首先，在data内定义一个函数和定义添加touchmove监听和移除的方法

//Vue数据变量区域
data(){
/*---------监听函数--------------*/
    handler:function(e){e.preventDefault();},
...
},
//Vue函数方法区域
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.");
    },

最低0.47元/天解锁文章