微信小程序遮罩层实现及阻止遮罩层下的页面滚动的问题

版权声明：本文为博主原创文章，如果转载请给出原文链接：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事件，需在真机上测试。

效果预览：

「创作不易，你的支持是本站持续更新最大的动力！」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝

微信

赏 1

谢谢你请我喝奶茶*^_^*

支付宝

微信