小程序页面滚动穿透
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个 Modal 层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示 <view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view> .bottom-fixed { position : fixed ; left : 0 ; top : 0 ; overflow : hidden ; } 给遮罩层添加 catchtouchmove 的阻止 myCatchTouch: function () { return; } <view wx:if="{{alert}}" catchtouchmove="myCatchTouch"> <template is="alert" data="{{alertData}}" /> </view> 这样的话，底部的列表内容就不会出现溢出，也自然不会滚动，