公告列表
公告列表
收藏
回答

滚动卡死 模态框 点击遮罩滚动卡死

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug disableScroll 客户端 6.7.4 2.4.1
<button>test</button>
  <view class="settlement">
    <view class='settlement-mask' v-show=" settlementDialogStatus"></view>
    <view class='settlement-actionsheet_toggle settlement-actionsheet'>
      <view class="panel">
        <view class="panel-heading">
          <view class="wrapper">
            <view class="icon icon-del"></view>
            <view class="text">清空选中</view>
          </view>
          <view class="icon icon-close"></view>
        </view>
        <view class="panel-body">
 
        <!--测试 1列表使用  css -webkit-overflow-scrolling : touch  滑动遮罩 后再 滑动滚动条会卡死--->
        <!--
       
          <view class="list1">
            <view wx:for="{{10}}">
           哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈
            </view>
          </view>
          -->
 
          <!-- 测试 2列表使用 scroll-view  滑动遮罩 后再 滑动滚动条会卡死--->
 
          <scroll-view class="list2" scroll-y>
                   <view wx:for="{{10}}">
           哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈
            </view>
          </scroll-view>
 
        <!-- 测试 3列表使用   page {
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
              position: fixed;
              z-index: 0;
          }  滑动遮罩 后再 滑动滚动条会卡死--->
         
        <!--
          <scroll-view class="list2" scroll-y>
                   <view wx:for="{{10}}">
           哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈 哈哈哈
            </view>
          </scroll-view>
          -->
        </view>
      </view>
    </view>
  </view>
.intro {
  margin: 30px;
  text-align: center;
}
    .settlement-mask {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .6);}
      .settlement-actionsheet {
        position: fixed;
        left: 0;
        bottom: 0;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 5000;
        width: 100%;
        min-height: 200px;
        background-color: #FFF;
        transition: transform .3s;
      }
       .settlement-actionsheet_toggle {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      .panel-heading {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8f8f8;
        }
        .text {
            font-size: 12px;
            color: #666;
         }
        .wrapper {
          display: flex;
          align-items: center;
          justify-content: left;
          
        }
 
 
 
 
    .list1 {
      padding: 0 15px;
      box-sizing: border-box;
     height: 300px;
      overflow-y: auto;
      -webkit-overflow-scrolling : touch
    }
   .list2 {
      padding: 0 15px;
      box-sizing: border-box;
      height: 300px;
    }
/*
  page {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
  }
  */


https://developers.weixin.qq.com/s/9tEprtme7M4C
最后一次编辑于  2018-12-07
回答关注问题邀请回答
收藏

2 个回答

  • 是小白啊
    是小白啊
    2018-12-07

    测试是可以的哦，建议可做下事件处理

    2018-12-07
    有用
    回复 3
    • 田佳
      田佳
      2018-12-07

      必须是真机测试哦。。。。。这点个电脑上是没问题的额

      2018-12-07
      赞
      回复
    • 是小白啊
      是小白啊
      2018-12-07回复田佳

      是的，测试机型：iPhonexr，微信版本：6.7.4，每个片段我们都会真机测试的

      2018-12-07
      赞
      回复
    • 田佳
      田佳
      2018-12-07回复是小白啊

      您好，我用的是Iphone6 p  ，步骤是滑动遮罩，  弹出层滚动会卡死

      2018-12-07
      赞
      回复
  • 2018-12-07

    试了下片段，没有发现卡死的情况，是只有真机才会出现吗？



    2018-12-07
    有用
    回复 3
    • 田佳
      田佳
      2018-12-07

      是的必须真机

      2018-12-07
      赞
      回复
    • 2018-12-07回复田佳

      。。代码片段无法真机预览

      2018-12-07
      赞
      回复
    • 田佳
      田佳
      2018-12-07回复

      导入的时候 选择小程序测试账号

      2018-12-07
      赞
      回复
请 登录 后发表内容
相关文档