这个问题在很多时候都会用到,比如在调用自定义弹窗、加载动画的时候,需要让页面不可以滑动,等等。
其实这个问题很简单,直接看代码:
<!-- index.wxml --> <view class="mask" catchtouchmove="stopTouch" bindtap="hidePop" wx:if="{{mask}}"></view> <view class="pop" catchtouchmove="stopTouch" wx:if="{{mask}}"> <view>这是弹出层--1</view> <view>这是弹出层--2</view> <view>这是弹出层--3</view> </view> <view class="btn" bindtap="showPop">按钮</view>
// index.js Page({ data: { mask:false, }, stopTouch() {}, showPop() { this.setData({ mask: true }) }, hidePop() { this.setData({ mask: false }) } })
/* index.wxss */ .mask, .pop, .btn { position: fixed; bottom: 0; left: 0; } .mask { width: 100%; height: 100%; z-index: 997; background-color: #858585b6; } .pop { height: 200px; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; background-color: #fff; z-index: 998; } .btn { width: 100%; height: 50px; color: aliceblue; text-align: center; line-height: 50px; background-color: #4df547; }
我们的弹出层的层级肯定是很高的,弹出层出现后,我们再点击、滑动的时候,点击的节点肯定是弹出层的节点,如果我们再弹出层以及遮罩层(如果有的话)绑定一个catchtouchmove
事件,这样,在滑动的时候就无法滑动页面了
发表评论 取消回复