收藏
回答

阻止滚动穿透后,内部区域也不能滚动了

自定义一个弹窗组件,底部加了个一个灰色蒙层,给蒙层添加 @touchmove.stop="stopTouchMove" 后,可以防止滚动穿透到弹窗组件下面的页面,但是蒙层内的一个可滚动区域也不能滚动了,不太清楚如何解决

下面是我写的一个demo,是wepy的~~~~

<template>
  <view class="container">
    <view @touchmove.stop="stopTouchMove" class="modal">
      <view class="inline__block">
        <repeat for="{{ dataSource }}" key="index" index="index" item="item">
          <view class="item">{{ item }}</view>
        </repeat>
      </view>
    </view>
  </view>
</template>
 
<script>
import wepy from 'wepy'
 
export default class Test extends wepy.page {
    config = {
        navigationBarTitleText: 'test'
    }
 
    data = {
      dataSource: [
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
        '测试',
      ]
    }
 
    methods = {
      stopTouchMove() {}
    }
}
</script>
 
<style lang='less'>
    .container {
        width: 750rpx;
        height: 200%;
        overflow: scroll;
        background-color: rgb(0, 255, 234);
 
        .modal {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, .5);
 
          .inline__block {
            border-radius: 8rpx;
            width: 400rpx;
            height: 500rpx;
            margin: 200rpx auto 0;
            background: #fff;
            overflow: scroll;
 
            >view {
              text-align: center;
            }
          }
        }
    }
</style>


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

2 个回答