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

最新推荐文章于 2024-04-23 15:14:50 发布

swiftlinlei

最新推荐文章于 2024-04-23 15:14:50 发布

阅读量5.2k

点赞数

分类专栏：前端文章标签：移动端滚动穿透 Vue2.0 mint-ui

本文链接：https://blog.csdn.net/swiftlinlei/article/details/81163374

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

3.解决方式：参考文档，了解下：https://blog.csdn.net/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].removeE

最低0.47元/天解锁文章