微信小程序自定义纯净模态框（弹出框）的实例代码

微信小程序自定义纯净模态框（弹出框）的实例代码微信小程序自定义纯净模态框（弹出框）的实例代码

主要介绍了微信小程序自定义纯净模态框（弹出框）的实例代码,代码简答易懂，非常不错，对大家的学习或工

作具有一定的参考借鉴价值，需要的朋友可以参考下

由于官方API提供的模态框只能显示简单的文字，但是在实际应用场景中，我们需要模态框上能够显示各种各样的组件和样

式，所以，以此为基础模拟出一套可以供大家自定义的纯净版的模态框，满足大家各式各样的需求。

效果图：

WXML:

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>

.modal-mask {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.5;

overflow: hidden;

z-index: 9000;

overflow: hidden;

position: fixed;

top: 20%;

left: 0;

right: 0;