收藏
回答

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

问题模块
API和组件

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

最后一次编辑于  2017-09-25  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

14 个回答

  • 社会你强哥
    社会你强哥
    2018-01-13
    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. 亲测有效。

    2018-01-13
    赞同 11
    回复 2
    • 明天
      明天
      2018-09-19

      也可以直接用catchtouchmove="{{true}}"

      2018-09-19
      赞同 22
      回复
    • 进去吧你
      进去吧你
      06-14
      position: relative;
      z-index: 0;

      建议用这两行,fixed会导致布局滚动到顶部

      06-14
      赞同
      回复
  • 海阔天空
    海阔天空
    2018-03-15

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


    2018-03-15
    赞同 11
    回复
  • musk
    musk
    2018-03-31

    上面的方法有缺点:

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

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


    2018-03-31
    赞同 11
    回复 2
    • GYL
      GYL
      2018-05-16
      确实有这些问题,使用scroll-view 在android下,性能又特别不好,请问有没有更好的方法
      2018-05-16
      赞同
      回复
    • 我去买橘子
      我去买橘子
      2018-08-02

      我也遇到同样的问题,但是我看美团的小程序做出来了这个效果,不知道他们怎么做的

      2018-08-02
      赞同
      回复
  • Can🌴
    Can🌴
    2017-09-25

    是哪个组件?

    2017-09-25
    赞同
    回复
  • Mr.  ZT
    Mr. ZT
    2017-09-25

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

    2017-09-25
    赞同
    回复
  • wdl
    wdl
    2017-12-11

    楼主想到解决方法没

    2017-12-11
    赞同
    回复
  • wdl
    wdl
    2018-02-06

    谢谢大家,已解决

    2018-02-06
    赞同
    回复 1
    • ZYuan
      ZYuan
      2018-08-24

      请问是怎么解决的 楼上楼下的方法我都试过了 但是还是不行

      2018-08-24
      赞同
      回复
  • 倔强的灰太狼🐺
    倔强的灰太狼🐺
    2018-03-13

    那么下拉刷新还有效么?

    2018-03-13
    赞同
    回复
  • 海阔天空
    海阔天空
    2018-03-15

    <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;  

    }

    希望有用


    2018-03-15
    赞同
    回复