今天写小程序的时候,需求是要在首页做一个弹框,做活动提醒,找了一遍小程序(主要对小程序的文档不熟悉),找了一会,发现没有想要的遮罩层,于是就在度娘上找文章,结果找到一篇文章,发现有的比较冗余,所以自己整理了一下:
先看效果:
wxml:
<view class='modal-mask' wx:if='{{showMask}}'>
<view class='modal-content'>
<!-- 这边就是放置展示的内容,可以是swiper组件或者是其他内容,我这里用了自己定义的banner组件 -->
<banners list="{{list}}" bindbannerTap="bannerTap"></banners>
</view>
<view class='modal-footer'>
<!-- 这边用的是一个字体图标,也是在网上找到的(小程序文档没找到) -->
<icon type="cancel" catchtap="cancel" size="44" color="white"></icon>
</view>
</view>
js:
data: {
list: [],//存放banner数据的
showMask: true, // 显示modal弹窗
},
// 点击取消按钮的回调函数
cancel() {
console.log('cancel')
this.setData({
showMask: false
})
},
//轮播图点击
bannerTap(e) {
console.log(e)
},
wxss:
/*遮罩层*/
.modal-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
/* 内容部分 */
.modal-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/*底部按钮*/
.modal-footer {
position: relative;
top: 41%;
text-align: center;
}
注意:这种效果没有阻止滚动条滚动,也就是说,在遮罩层的情况下,其下方的内容还是可以滚动查看的。但是在小程序端查看的时候,用户一般是点击了取消按钮或者是点击查看才对。