【小程序】微信小程序中遮罩层的滚动穿透问题

  • Z时代
  • 2024-01-10
  • 分类：IT

【小程序】微信小程序中遮罩层的滚动穿透问题

使用小程序的modal组件实现遮罩层效果时，会出现滚动穿透的问题，即遮罩层后面的页面依旧可以滚动，这个问题有解决办法吗？

回答

我的解决方案是:
添加 catchtouchmove 事件来阻止

    <view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
        <template is="alert" data="{{alertData}}" />
    </view>

  myCatchTouch: function () {
    console.log('stop user scroll it!');
    return;
  },

如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove="move" move:function(){};

如果弹出层有滚动事件，那么在弹出层出现的时候给底部的containerView加上一个class 消失的时候移除。

<view class="{{showSearchView?'tripList_root':''}}">

.tripList_root{

    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;

}

  1. 亲测有效。

弹窗出现时，给最外层view加上

height: 100vh;
overflow: hidden;

有两种方法：在出现遮罩层的时候 ，让你的
content{overflow:hidden}当遮罩层消失的时候移除这个属性

二： 这个是比较彻底的方法， 当弹窗出现的时候， 给body添加固定定位
body{
position:fixed;
top:0;left:0;right:0;bottom:0;
}

这种写法， 只是告诉你思路， 并没有用vue 的方法实现， 你可以写两个class 然后根据弹窗是否出现触发选择器，来改变 class值就行了

在遮罩打开的时候为你的背景容器添加hiddenScroll这个class，然后遮罩关闭后再移除

.hiddenScroll{
    overflow:hidden;
}

说下思路吧,实现这个的大致代码是:

<!--wxml-->
<view class="mask" wx:if="{{hasMask}}">
    我是遮罩层
</view>
<view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
    我是页面内容
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //显示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隐藏遮罩
        this.setData({
            hasMask:false
        })
    },
}

感觉是坑。至少我没有找到办法取更改 <page> 中的样式。除非不在 <page> 中滚动。

弹出遮罩时给页面内容的标签加个class overflow: hidden样式就可以了、取消遮罩时去掉class

https://www.cnblogs.com/apgy/...
这个方法很好用

给蒙层那个元素加个touchmove事件，这个事件用来阻止事件冒泡，preventD中的代码如下：

　　preventD(){}

　　问题就解决了

page{
   height:100%;
   .hiddenScroll {
     height:100%;
     overflow: hidden;
   }
}

最外层view

<view class="{{ modalHidden ? '' : 'hiddenScroll' }}">

以上是 【小程序】微信小程序中遮罩层的滚动穿透问题 的全部内容， 来源链接： utcz.com/p/78530.html

回到顶部