微信小程序之自定义模态弹窗（带动画）实例

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 实现用户自定义弹框
• 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画）
• 获取弹出框的内容，自定义事件获取

二、程序实现具体步骤

1.弹框index.wxml代码

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</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="可自行定义内容"></