版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156158.html
最近一直在帮客户开发小程序，在很多地方用到了遮罩效果。遮罩效果是一种非常便捷、简洁的表现方式。代码实现也是非常的简单，今天这篇文章主要为大家详细介绍微信小程序遮罩效果的实现，对初学者具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
小程序标签代码
<view class="main {{isShow?'show':'hide'}}" catchtouchmove='ture'>
<view class='content'>
<image class="file-image" src='{{file_path}}'></image>
<image src='../../images/del.png' class='close-hide' bindtap='onClose'></image>
</view>
</view>效果样式（最主要的是搞清除relative相对布局与absolute绝对布局的概念）
.show {
display: block;
}
.hide {
display: none;
}
.main {
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
top: 0;
left: 0;
}
.content {
padding: 20rpx 0;
width: 80%;
height: 80%;
border-radius: 20rpx;
display: flex;
background: #fff;
margin: 10% auto;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.file-image{
width: 80%;
height:70%;
}
.close-hide {
height: 60rpx !important;
width: 60rpx !important;
position: absolute;
top: -9rpx;
right: -9rpx;
}遮罩中使用的图片和是否显示的标识
data: {
file_path:"", //显示的图片地址
isShow:true //控制遮罩是否显示的标识
}点击关闭图标的事件处理
//关闭透明层
onClose: function () {
this.setData({
isShow: false
})
},注意：如果需要阻止遮罩层下页面的滚动，只需要在遮罩层上加上catchtouchmove='ture' 需要注意的是模拟器无touch事件，需在真机上测试。
效果预览：
祝生活愉快！
「创作不易，你的支持是本站持续更新最大的动力！」
赏
1
支付宝
微信
谢谢你请我喝奶茶*^_^*
支付宝
微信
共有 0 条评论 - 微信小程序遮罩层实现及阻止遮罩层下的页面滚动的问题