在小程序的开发过程中，我们肯定会遇到开发弹窗的情况。下面我们来看一下正式版小程序对于弹页的说明。API的接口如下。从官方的代码示例来看，看似简单，就跟一个asert一样，看不出弹窗真正的需求。所以今天HTML51.COM写了一个弹窗小程序教程，供大家参考。我们先来看一下首页动态效果图：首先看到的是首页代码：CopyRight:AllRightReserved原作者：51小程序微信小程序开发者社区HTML51.COM点击进入弹窗演示页面当然，重点不在这里。index.wxml的代码如下：弹出标题Title标题标题标题备注确定index.wxss的代码如下：.btn{width:80%;填充：20rpx0；边界半径：10rpx；文本对齐：居中；保证金：40rpx10%；背景：#000；颜色：#fff；}/*mask*/.drawer_screen{width:100%;高度：100%；位置：固定；顶部：0；左：0；z-指数：1000；背景：#000；不透明度：0.5；溢出：隐藏；}/*内容*/.drawer_box{宽度：650rpx；溢出：隐藏；位置：固定；顶部：50%；左：0；z-指数：1001；背景：#FAFAFA；保证金：-150px50rpx050rpx;边界半径：3px；}.drawer_title{内边距：15px；字体：20px“微软雅黑”；文本对齐：居中；}.drawer_content{高度：210px；溢出-y：滚动；/*超级盒子子高度可滚动*/}.btn_ok{padding:10px;字体：20px“微软雅黑”；文本对齐：居中；border-top:1pxsolid#E8E8EA;颜色：#3CC51F；}.top{padding-top:8px;}.bottom{padding-bottom:8px;}.title{高度：30px；行高：30px；宽度：160rpx；文本对齐：居中；显示：内联块；字体：30028rpx/30px“微软雅黑”；}.input_base{border:2rpxsolid#ccc;左填充：10rpx；右边距：50rpx；}.input_h30{高度：30px；行高：30px；}.input_h60{高度：60px；}.input_view{font:12px"微软雅黑";背景：#fff；颜色：#000；行高：30px；}input{font:12px"微软雅黑";背景：#fff;颜色：#000;}radio{margin-right:20px;}.grid{显示：-webkit-box；展示：盒子；}.col-0{-webkit-box-flex:0;box-flex:0;}.col-1{-webkit-box-flex:1;box-flex:1;}.fl{float:left;}.fr{float:right;}index.js的代码如下：Page({data:{showModalStatus:false},powerDrawer:function(e){varcurrentStatu=e.currentTarget.dataset.statu;this.util(currentStatu)},util:function(currentStatu){/*动画部分*///SectionStep1:创建动画实例varanimation=wx.createAnimation({duration:200,//动画时长timingFunction:"linear",//lineardelay:0//0表示无延迟});//Step2:this将动画实例赋值给当前动画实例this.animation=animation;//Step3:执行第一组动画animation。opacity(0).rotateX(-100).step();//Step4:exporttheanimation将对象赋值给data对象存储this.setData({animationData:animation.export()})//Step5:设置定时器到指定时间后，执行第二组动画setTimeout(function(){//执行第二组动画animationanimation.opacity(1).rotateX(0).step();//数据对象中存储的第一组动画被执行完第二组动画的动画对象替换this.setData({animationData:animation})//Closeif(currentStatu=="close"){this.setData({showModalStatus:false});}}.bind(this),200)//显示if(currentStatu=="open"){this.setData({showModalStatus:true});}}})源码下载地址：http://bbs.html51.com/t-1342-...
