微信小程序设置打开弹出层后,让下层页面不可滑动
sz199511 · 1560浏览 · 发布于2020-12-28
这个问题在很多时候都会用到,比如在调用自定义弹窗、加载动画的时候,需要让页面不可以滑动,等等。
其实这个问题很简单,直接看代码:
<!-- 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
事件,这样,在滑动的时候就无法滑动页面了
相关推荐
android下vulkan与opengles纹理互通
talkchan · 1174浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图
奔跑的男人 · 2173浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal
吴振华 · 867浏览 · 2019-05-09 17:15:04
在华为写了十几年代码,我为什么还没有被拿去“祭天”
追忆似水年华 · 1199浏览 · 2019-05-09 17:22:20
android 通过修改图片像素实现CircleImageView
吴振华 · 1126浏览 · 2019-05-09 22:26:56
分类专栏
最新发布
最热排行
0评论