收藏
回答

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

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

回答关注问题邀请回答
收藏

13 个回答

  • 社会你强哥
    社会你强哥
    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
    有用 6
    回复 6
    • 2018-09-19

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

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

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

      2019-06-14
      2
      回复
    • 伍勇\Leo
      伍勇\Leo
      2019-12-11
      fixed可行,但是底层布局会回到顶部?relative无效。有啥更完美的解决方案么?
      2019-12-11
      回复
    • 荒岛。
      荒岛。
      2020-01-10回复伍勇\Leo
      请问一下,你找到解决方案了吗?底层布局不让回到顶部
      2020-01-10
      回复
    • 吕
      2020-01-14
      用relative似乎还是会回顶
      2020-01-14
      回复
    查看更多(1)
  • 睡前原谅一切
    睡前原谅一切
    2021-10-15

    使用page-meta组件设置 overflow: hidden即可解决

    2021-10-15
    有用 3
    回复 2
  • 🇫 🇴 🇷 🇬 🇺 🇴
    🇫 🇴 🇷 🇬 🇺 🇴
    2020-06-26

    可以这样来解决,


    参照:https://blog.csdn.net/WEIGUO19951107/article/details/106970582

      // 重点A:阻止事件冒泡
      handleTouchMove = (e) => {
        e.stopPropagation()
      }
      render() {
        return (
          <View className='rootClass' onTouchMove={this.handleTouchMove}>
            <!-- 遮罩层 --> 
            <View onClick={this.close} className='at-float-layout__overlay' />
            <View className='at-float-layout__container layout'>
              <View className='layout-body'>
                <!-- 重点B: ScrollView(开启scrollY)--> 
                <ScrollView
                  scrollY
                  scrollX={false}
                  className='layout-body__content'
                >
                  {this.props.children}
                </ScrollView>
              </View>
            </View>
          </View>
        )
      }
    
    
    
    2020-06-26
    有用 2
    回复 1
    • H
      H
      2020-09-01
      概括一下思路,使用catchtouchmove可以让事件穿不出去,则根布局不会滑动,但是catch住的view也不能滑动,所以把view换成scrollview 就可以滑了,要比改布局样式方便多了
      2020-09-01
      1
      回复
  • 海阔天空
    海阔天空
    2018-03-15

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


    2018-03-15
    有用 2
    回复 2
    • 我的气质比较奇怪
      我的气质比较奇怪
      2022-03-29
      这个真有用
      2022-03-29
      回复
    • Dodeca.
      Dodeca.
      2023-05-30
      不行呀 这个蒙层还有滑动效果一并禁用了
      2023-05-30
      回复
  • Accardo
    Accardo
    2020-07-10

    现在有方案解决现在

    detail.json 文件中 添加禁止 弹性

    当弹层时候 把scroll-view的竖向滚动禁用,不让滚动,关闭弹层后再打开

    这样弹层后 背景是完全不动的也没有他弹性,就不会出现背景层跟着动了


    2020-07-10
    有用 1
    回复
  • musk
    musk
    2018-03-31

    上面的方法有缺点:

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

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


    2018-03-31
    有用 1
    回复 2
    • GYL
      GYL
      2018-05-16
      确实有这些问题,使用scroll-view 在android下,性能又特别不好,请问有没有更好的方法
      2018-05-16
      回复
    • 爱吃胡萝卜
      爱吃胡萝卜
      2018-08-02

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

      2018-08-02
      回复
  • 林垚
    林垚
    2020-03-20

    一楼说的思路对。

    如果弹出层也有滚动,完美的方案是先把背景层设置成fixed高度100%,然后遮罩出现修改背景层的overflow:hidden,遮罩消失修改overflow-y:scroll,大致就是这个思路,亲测,就算修改后也不会导致背景层归顶,完美。

    2020-03-20
    有用
    回复 1
    • 林垚
      林垚
      2020-03-20
      不过这种会限制上拉加载功能检测不到,还有另一种办法,背景层scroll-view,弹出层scroll-view,双scroll-view完美,上拉加载可以通过监听scroll-view的事件获取
      2020-03-20
      回复
  • 海阔天空
    海阔天空
    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
    有用
    回复
  • 醉行僧
    醉行僧
    2018-03-13

    那么下拉刷新还有效么?

    2018-03-13
    有用
    回复
  • wdl
    wdl
    2018-02-06

    谢谢大家,已解决

    2018-02-06
    有用
    回复 1
    • ZYuan
      ZYuan
      2018-08-24

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

      2018-08-24
      回复

正在加载...

登录 后发表内容