4

图片描述

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

StevenLiu 114
2017-09-12 提问

查看全部 10 个回答

5

如果弹出层没有滚动事件,就直接在蒙板上加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. 亲测有效。

推荐答案

10

已采纳

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

    <view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
        <template is="alert" data="{{alertData}}" />
    </view>
  myCatchTouch: function () {
    console.log('stop user scroll it!');
    return;
  },
2

针对catchtouchmove方法,原生小程序使用catchtouchmove="touchmoveHandler",mpvue中使用@touchmove.stop="touchmoveHandler",注意要给个空方法,否则会报警

StevenLiu · 2018年12月19日

展开评论

推广链接