收藏
回答

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

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

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

12 个回答

  • Can🌴
    Can🌴
    2017-09-25

    是哪个组件?

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

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

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

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

      2019-06-14
      1
      回复
    • 伍勇\Leo
      伍勇\Leo
      2019-12-11
      fixed可行,但是底层布局会回到顶部?relative无效。有啥更完美的解决方案么?
      2019-12-11
      回复
    • 荒岛。
      荒岛。
      01-10回复伍勇\Leo
      请问一下,你找到解决方案了吗?底层布局不让回到顶部
      01-10
      回复
    • 吕世界宇宙无敌超级%长的@测试昵称
      吕世界宇宙无敌超级%长的@测试昵称
      01-14
      用relative似乎还是会回顶
      01-14
      回复
    查看更多(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
      回复
  • 海阔天空
    海阔天空
    2018-03-15

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


    2018-03-15
    有用 1
    回复
  • Accardo
    Accardo
    07-10

    现在有方案解决现在

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

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

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


    07-10
    有用
    回复
  • forguo
    forguo
    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'>
                 
                <ScrollView
                  scrollY
                  scrollX={false}
                  className='layout-body__content'
                >
                  {this.props.children}
                ScrollView>
              View>
            View>
          View>
        )
      }
    
    
    
    06-26
    有用
    回复
  • 林垚
    林垚
    03-20

    一楼说的思路对。

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

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

正在加载...

登录 后发表内容