信我，这次只讲技术！
实现效果（点击“更换手机号”，背景变暗，弹出输入框）：
嗯，我懒，就用了上一篇文章小程序填坑之路--弹窗修改手机号后的更新（已解决）的图。
先上wxml的代码，
<view class="weui-vcode-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"> <input class='tel-input' type='number' placeholder='请输入手机号码' value='{{newCellPhone}}' maxlength="11" bindinput="getNewPhoneNum"></input> <view class="form_group"> <input type="text" class="sendmsg_input" placeholder="短信验证码" placeholder-class="placeholder_style" bindinput='getVerifyCode' value='{{verifyCode}}' /> <view class='vertificate' bindtap="getVerificationCode">{{time}} <text>{{suffix}}</text> </view> </view> </view> <view class="btn_ok" bindtap="reviseTap" data-statu="close">确定</view> </view>这段代码一上来，我忽然觉得：嘿，这篇文章和弹窗修改手机号那个可以一起做，不过得先看这个。
本来想讲讲，发现，还不如截图，我直接上截图，代码一起上。
wxml讲完了，CSS没什么可以说的，先直接写上吧。
/*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } /*content*/ .drawer_box { width: 95%; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 1001; margin: -150px 50rpx 0 20rpx; background-color: #fff; } .drawer_title { padding: 15px; font: 20px "microsoft yahei"; text-align: center; border-bottom: 3px solid #2fc7a0; } .drawer_content { overflow-y: scroll; /*超出父盒子高度可滚动*/ } .drawer_content .title { font-size: 30rpx; text-align: left; color: #333; margin-top: -68rpx; display: block; padding: 0 20rpx; } .drawer_content .tel-input { height: 95rpx; border-bottom: 1px solid #a0a0a0; width: 90%; margin: 0 auto; color: #333; text-align: left; font-size: 32rpx; } .btn_ok { padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid #e8e8ea; color: #fff; background-color: #2fc7a0; width: 80%; margin: 22rpx auto; border-radius: 25rpx; } .form_group { display: flex; flex-direction: row; justify-content: space-between; width: 95%; margin: 0 auto; text-align: left; } .form_group input, .form_group picker { width: 676rpx; border-bottom: 1px solid #a0a0a0; height: 121rpx; padding-left: 20rpx; font-family: PingFangSC-Regular; font-size: 32rpx; letter-spacing: 0; line-height: 121rpx; } .form_group .sendmsg_input { width: 348rpx; color: #333; } .form_group .vertificate { width: 326rpx; border-bottom: 1px solid #a0a0a0; height: 121rpx; padding-left: 20rpx; font-family: PingFangSC-Regular; font-size: 32rpx; letter-spacing: 0; line-height: 121rpx; text-align: center; } .vertificate text { color: gray; }JS上有注释，很容易理解，写上代码吧，在代码里进行讲解。
//更换手机号 powerDrawer: function(e) { //var that = this; var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function(currentStatu) { /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步：这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步：执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步：导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步：设置定时器到指定时候后，执行第二组动画 setTimeout(function() { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData({ showModalStatus: false }); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData({ showModalStatus: true }); } },我忽然觉得这样并不算我自己写，原作者我不知道在哪里找了，这是我从网上找下来的代码。不过自己进行了二次开发修改，却也没怎么动。先这样吧，这篇还不算我原创呢。
说什么讲技术，嗯，女生说的话，有时候是假的呢~~~
