H5W3
当前位置:H5W3 > JavaScript > 小程序 > 正文

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

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

使用小程序的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' }}">

本文地址:H5W3 » 【小程序】微信小程序中遮罩层的滚动穿透问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址