|
首先看看官方提供的模态弹窗
api如下：
示例：
这样的模态弹窗，充其量只能做个alert，提示一下信息。
但是并不能使用它来处理复杂性的弹窗业务，因此写了Michael从新自定义了一个，采用了仿原生的样式写法
wxml：
-
-
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
-
-
-
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
-
-
-
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
-
-
-
<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>
|
