微信小程序之自定义模态弹窗实例详解

微信小程序之自定义模态弹窗实例详解
这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

首先看看官方提供的模态弹窗，供大家参考，具体内容如下

api如下：

示例：

这样的模态弹窗，充其量只能做个alert，提示一下信息。但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法

wxml：

<!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view> <!--mask--> <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> <!--content--> <!--使用animation属性指定需要执行的动画--> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> <!--drawer content--> <view class="drawer_title">弹窗标题</view> <view class="drawer_content"> <view class="top grid"> <label class="title col-0">标题</label> <input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input> </view> <view class="top grid"> <label class="title col-0">标题</label> <input class="input_base input_h30 col-1" name="mobile" value="110"></input> </view> <view class="top grid"> <label class="title col-0">标题</label> <input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input> </view> <view class="top grid"> <label class="title col-0">标题</label> <input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input> </view> <view class="top bottom grid"> <label class="title col-0">备注</label> <input class="input_base input_h30 col-1" name="bz"></input> </view> </view> <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> </view>