自定义一个弹窗组件，底部加了个一个灰色蒙层，给蒙层添加 @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> |
没有 只是设置了外面page的overflow: hidden,来做的
解决了吗