当前位置: 首页> 文旅> 旅游 > 微信小程序遮罩层显示

微信小程序遮罩层显示

时间:2025/7/10 14:32:15来源:https://blog.csdn.net/weixin_44032619/article/details/140148100 浏览次数:0次

效果展示:

wxml页面:

<view class='modal-mask' wx:if='{{showModal}}'><view class="modal-container"><view class='modal-content'></view><view class='modal-footer' bindtap="closeImage">//这个/images/index/close.png的路径是关闭按钮图片,本人从阿里矢量图网站下载根据自己需求寻找,存入本地即可<image src="/images/index/close.png"  style="width: 80rpx; height: 80rpx;"/></view></view>
</view>

wxss页面:

/*遮罩层*/
.modal-mask {display: flex;justify-content: center;align-items: center;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 999;
}.modal-container {display: flex;flex-direction: column;
}/*遮罩内容*/
.modal-content {display: flex;flex-direction: column;width: 100vw;height: 450rpx;background-image: url(https://xxx/library/xcx_pop_img/xxx.jpg);        //图片路径,根据自己的写background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}.modal-footer {height: 80rpx;width: 100%;margin-top: 80rpx;text-align: center;
} 

js页面:

data: {showModal:true,   //弹窗显示},
// 关闭弹窗closeImage:function(e) {this.setData({showModal:false})},

关键字:微信小程序遮罩层显示

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: