这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下
效果图
WXML
这里加入你想加入的内容
WXSS
.popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; } .mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .popup_main { position: fixed; top: 50%; left: 50%; width: 85%; transform: translate(-50%, -50%); padding: 10px; box-sizing: border-box; background-color: #fff; border: 5px; border-radius: 10px; } .close_wrapper { width: 100%; height: 20px; display: flex; align-items: center; justify-content: flex-end; } .close_icon { width: 16px; }
JS
data: { /** 弹出层 **/ popShow: false, } /** * 弹出层 */ // 打开弹窗 popupTap: function (e) { this.setData({ popShow: true }) }, // 关闭弹窗 closePop: function (e) { this.setData({ popShow: false }) }, // 这个函数内容为空 用于阻止屏幕滚动 preventTouchMove: function (e) { },
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是微信小程序自定义弹出层效果的详细内容，更多请关注本站其它相关文章！
