小程式填坑之路--自定義模態彈窗(已解決)
阿新 • • 發佈:2018-11-08
信我,這次只講技術!
實現效果(點選“更換手機號”,背景變暗,彈出輸入框):
嗯,我懶,就用了上一篇文章小程式填坑之路--彈窗修改手機號後的更新(已解決)的圖。
先上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 }); } },
我忽然覺得這樣並不算我自己寫,原作者我不知道在哪裡找了,這是我從網上找下來的程式碼。不過自己進行了二次開發修改,卻也沒怎麼動。先這樣吧,這篇還不算我原創呢。
說什麼講技術,嗯,女生說的話,有時候是假的呢~~~