这个问题在很多时候都会用到,比如在调用自定义弹窗、加载动画的时候,需要让页面不可以滑动,等等。
其实这个问题很简单,直接看代码:
<!-- 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
事件,这样,在滑动的时候就无法滑动页面了
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!