微信小程式自定義底部彈出框動畫
阿新 • • 發佈:2020-11-17
微信小程式之自定義底部彈出框動畫,供大家參考,具體內容如下
最近做小程式時,會經常用到各種彈框。直接做顯示和隱藏雖然也能達到效果,但是體驗性太差,也比較簡單粗暴。想要美美地玩,新增點動畫還是非常有必要的。下面做一個底部上滑的彈框。
wxml
<view class="modals modals-bottom-dialog" hidden="{{hideModal}}"> <view class="modals-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view> </view> <button bindtap="showModal">點我</button>
wxss
/*模態框*/ .modals { position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; } .modals-cancel { position: absolute; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,.5); } .bottom-dialog-body { position: absolute; z-index: 10001; bottom: 0; left: 0; right: 0; padding: 30rpx; height: 800rpx; background-color: #fff; } /*動畫前初始位置*/ .bottom-pos { -webkit-transform: translateY(100%); transform: translateY(100%); }
js
Page({ data:{ hideModal:true,//模態框的狀態 true-隱藏 false-顯示 animationData:{},// },// 顯示遮罩層 showModal: function () { var that=this; that.setData({ hideModal:false }) var animation = wx.createAnimation({ duration: 600,//動畫的持續時間 預設400ms 數值越大,動畫越慢 數值越小,動畫越快 timingFunction: 'ease',//動畫的效果 預設值是linear }) this.animation = animation setTimeout(function(){ that.fadeIn();//呼叫顯示動畫 },200) },// 隱藏遮罩層 hideModal: function () { var that=this; var animation = wx.createAnimation({ duration: 800,//動畫的效果 預設值是linear }) this.animation = animation that.fadeDown();//呼叫隱藏動畫 setTimeout(function(){ that.setData({ hideModal:true }) },720)//先執行下滑動畫,再隱藏模組 },//動畫集 fadeIn:function(){ this.animation.translateY(0).step() this.setData({ animationData: this.animation.export()//動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性 }) },fadeDown:function(){ this.animation.translateY(300).step() this.setData({ animationData: this.animation.export(),}) },})
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。