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

1、基本需求。

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

2、案例目录结构

二、程序实现具体步骤

1.弹框index.wxml代码

<!--button-->
<view class="btn"bindtap"powerDrawer"data-statu"open">来点我呀</view>
"drawer_screen""close"wx:if"{{showModalStatus}}"></view>
<!--使用animation属性指定需要执行的动画-->
  <!--drawer content-->
"drawer_content">
      <label"title col-0"标题</label>
</view>
</label>
</view>
</label>
>
"Email""仅供学习使用"></input>
"top bottom grid"备注</label>
</view>
"btn_ok""close"确定</view>

2.弹框index.wxss代码

.btn {
  padding20rpx0;
  textalign center;
  background #000;
}
drawer_screen 100  height%;
  zindex1000;
  opacity0.5;
}
drawer_Box {
;
 -150px50rpx050rpx;
}
:15px  font20px "microsoft yahei"}
210pxy scroll;/*超出父盒子高度可滚动*/
btn_ok10pxtop1px solid #E8E8EA;
{
title {
left    marginrightinput_h30input_h6060pxinput_view12px    background    color:#000input {
000}
20pxgrid { displaywebkitBox Box}
11;}
fr  right;}

3.弹框index.js逻辑代码 
a.动画部分的功能实现

    /* 动画部分 */
    var animation = wxcreateAnimation({
      timingFunction"linear"//线性
    });
thisanimation  animation// 第3步：执行第一组动画
// 第4步：导出动画对象赋给数据对象储存
})
    setTimeout(function()      // 执行第二组动画
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
        animationData animation
//关闭
        (
        );
// 显示
          showModalStatustrue
  }

三、案例运行效果图