云诺说 - 小程序定制 - 广告营销
当前位置: 微信小程序 > 微信小程序遮罩层实现及阻止遮罩层下的页面滚动的问题

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

2019-07-15 09:00 分类:微信小程序 作者:云诺 阅读(89)

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

效果预览:

QQ截图20190715204837 (1).png

 

祝生活愉快!

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

赞(0) 打赏

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

支付宝
微信
1

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

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 微信小程序遮罩层实现及阻止遮罩层下的页面滚动的问题

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:76 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:86 个
  • 评论总数:0 条
  • 访问总量: 12060次
  • 最近更新:2019年11月21日