微信小程序中遮罩层的滚动穿透问题
发布于 6 年前 作者 yshen 272 次浏览 来自 问答

小程序的自定义的，遮罩层会出现滚动穿透的问题，即遮罩层下面的页面依旧可以滚动，这个问题有解决办法吗？

9 回复

就是自己定义的一个 view 设置成遮罩层的样式

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

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

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

    .tripList_root{

    3.         top:0px;

            left: 0px;

            width: 100%;

            height: 100%;

            overflow: hidden;

            position: fixed;

            z-index: 0;

    }

    3. 亲测有效。

楼主想到解决方法没

上面的方法有缺点：

  1. 当页面注册有onPullDownRefresh事件时会触发该事件；

  2. 当页面滚动一定距离时，显示遮罩时页面会回到顶部；

谢谢大家，已解决

是哪个组件？

那么下拉刷新还有效么？

<template name=“timeSelect”>

 <view wx:if="{{id}}" class=“stop_bg_scroll” catchtouchmove=“preventTouchMove”>

   <form bindsubmit=“bindsubmit” id=’{{id}}’>

     <!-- 半透明遮挡层 -->

     <view class=“dialog-mask” bindtap=“bindtap” id=“mask” style=“display:block;”></view>

     <view class=‘time-time’>

       <!-- 标题 -->

       <view indicator-style=“height: 50px;” class=“time-title”>{{title}}{{yyyy}}-{{MM}}-{{dd}} {{HH}}:{{mm}}:{{ss}}

       </view>

       <!-- 时间滚动条 -->

       <picker-view id="{{id}}" indicator-style=“height: 50px;” class=‘time-content’ value="{{value}}" bindchange="bindchange"name=“index”>

         <picker-view-column>

           <view wx:for="{{yyyys}}" style=“line-height: 50px”>{{item}}年</view>

         </picker-view-column>

         <picker-view-column>

           <view wx:for="{{MMs}}" style=“line-height: 50px”>{{item}}月</view>

         </picker-view-column>

         <picker-view-column>

           <view wx:for="{{dds}}" style=“line-height: 50px”>{{item}}日</view>

         </picker-view-column>

       </picker-view>

       <view class=“time-footer”>

         <button class=“time-cancel” formType=‘submit’ id=“cancel” data-status=“cancel”>取消</button>

         <button class=“time-confirm” formType=‘submit’ id=“confirm” data-status=“confirm”>确定</button>

       </view>

     </view>

   </form>

 </view>

</template>

wxss:

.stop_bg_scroll{

 top: 0px;

 left: 0px;

 width: 100%;

 height: 100%;

 overflow: hidden;  

}

希望有用

把catchtouchmove=“stopTouch” 放在 包裹遮罩与对话框的 view中，在js添加stopTouch(){} 方法。在开发工具中测试无效。在真机中测试可行

回到顶部