微信小程式彈框效果解析
阿新 • • 發佈:2018-11-09
先上程式碼
wxml部分:
<view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上彈起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open" data-num='-300'> <text>向下彈出</text> </view> <!--遮罩部分--> <view class="drawer_screen" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view> <!--彈出層內容--> <!--使用animation屬性指定需要執行的動畫--> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> <view class='modalBox'> <view class='modalQues'>是否退出?</view> <view class='modalConf'>是否確定退出</view> <view class='hidePick'> <text bindtap="powerDrawer" data-statu="close" class='hideModal' >確定</text> <text bindtap="powerDrawer" data-statu="close" class='hideModal' >取消</text> </view> </view> </view>
wxss部分:
.top { margin: 0 auto; margin-top: 50rpx; background: #1da0ee; color: #fff; width: 50vw; text-align: center } .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:600rpx; height:300rpx; overflow:hidden; position:fixed; top:50%; left:50%; z-index:1001; background:#FAFAFA; margin-top:-150rpx; border-radius:3px; margin-left:-300rpx; } .modalBox { padding: 60rpx; font-size: 30rpx; } .modalConf { font-size: 24rpx; color: #999; margin-top: 20rpx; } .hidePick { text-align: right; margin-top: 50rpx; } .hideModal { color: #1da0ee; margin-left: 130rpx; }
js部分:
Page({ data: { }, // 自定義彈框 powerDrawer: function (e) { console.log(e) //打印出當前物件 var currentStatu = e.currentTarget.dataset.statu; //獲取statu屬性值 var currentNum = e.currentTarget.dataset.num;//獲取num屬性值 currentNum = parseInt(currentNum , 10) //注意,這一步是將字串轉換為數字 this.util(currentStatu,currentNum) //將引數引入util方法 }, util: function (currentStatu,currentNum) { /* 動畫部分 */ // 第1步:建立動畫例項 var animation = wx.createAnimation({ duration: 200, //動畫時長 timingFunction: "linear", //線性 delay: 0 //0則不延遲 }); // 第2步:這個動畫例項賦給當前的動畫例項 this.animation = animation; console.log(currentNum) // 第3步:執行第一組動畫 animation.opacity(0).translateY(currentNum).step(); // 第4步:匯出動畫物件賦給資料物件儲存 this.setData({ animationData: animation.export() }) // 第5步:設定定時器到指定時候後,執行第二組動畫 setTimeout(function () { // 執行第二組動畫 animation.opacity(1).translateY(0).step(); // 給資料物件儲存的第一組動畫,更替為執行完第二組動畫的動畫物件 this.setData({ animationData: animation }) //關閉 if (currentStatu == "close") { this.setData( { showModalStatus: false } ); } }.bind(this), 200) // 顯示 if (currentStatu == "open") { this.setData( { showModalStatus: true } ); } }, })
這只是很簡單的一個彈框 , 類似的左右彈出只需要將translateY改為translateX就行了。 但是這段程式碼有一個問題就是當你點選關閉的時候 , currentNum是不存在的,同時關閉彈框時currentNum我們不可以賦值 , 所以需要利用小程式的快取APi來完善這個動效