今天給大家?guī)硪粋€(gè)微信小程序的彈出是菜單效果，老規(guī)矩先上效果圖。(錄制的gif動(dòng)畫有點(diǎn)卡，實(shí)際真機(jī)或是模擬器上很順暢)
先簡(jiǎn)單說下思路：
1、首先在屏幕的某個(gè)位置放幾個(gè)懸浮按鈕，放幾個(gè)看你需要的功能
2、點(diǎn)擊最上層(wxml中最后一個(gè)就是最上層)的的按鈕后增加背景遮罩，這個(gè)遮罩在我前面自定義modal彈框時(shí)有用到
3、分別對(duì)按鈕做旋轉(zhuǎn)和移動(dòng)動(dòng)畫和透明度，造成動(dòng)畫差異就是位移的動(dòng)畫距離不同
4、收起的時(shí)候回到原來位置并且讓透明度變成0就ok了
思路說完了，下面開始上實(shí)現(xiàn)代碼，這里同樣也是封裝成了組件，方便調(diào)用。
首先是wxml實(shí)現(xiàn)
<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view><view > <image src="../../img/add.png" class="buttom" animation="{{animDelLots}}" bindtap="deleteLots"></image> <image src="../../img/add.png" class="buttom" animation="{{animAdd}}" bindtap="add"></image> <image src="../../img/add.png" class="buttom" animation="{{animMain}}" bindtap="showOrHide"></image></view>然后是wxss
//懸浮按鈕.buttom{ width: 100rpx; height: 100rpx; display: flex; flex-direction: row; position: fixed; bottom:60rpx; right: 60rpx; z-index: 1001;}.drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; right:0; bottom:0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden;}.drawer_box { overflow: hidden; position: fixed; z-index: 1001;}json文件
{ "component": true, "usingComponents": {}}最后是js邏輯實(shí)現(xiàn)
// components/Menu/menu.jsvar systemInfo = wx.getSystemInfoSync();Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數(shù)據(jù) */ data: { isShow: false,//是否已經(jīng)彈出 animMain: {},//旋轉(zhuǎn)動(dòng)畫 animAdd: {},//item位移,透明度 animDelLots: {},//item位移,透明度 }, /** * 組件的方法列表 */ methods: { //點(diǎn)擊彈出或者收起 showOrHide: function () { if (this.data.isShow) { //縮回動(dòng)畫 this.takeback(); this.setData({ isShow: false }) } else { //彈出動(dòng)畫 this.popp(); this.setData({ isShow: true }) } }, add: function () { this.triggerEvent("addEvent") this.showOrHide() }, deleteLots: function () { this.triggerEvent("deleteLotsEvent") this.showOrHide() }, //彈出動(dòng)畫 popp: function () { //main按鈕順時(shí)針旋轉(zhuǎn) var animationMain = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationDelLots = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationAdd = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationMain.rotateZ(180).step(); animationDelLots.translate(0, -200 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step(); animationAdd.translate(0, -320 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step(); this.setData({ animMain: animationMain.export(), animDelLots: animationDelLots.export(), animAdd: animationAdd.export(), }) }, //收回動(dòng)畫 takeback: function () { //main按鈕逆時(shí)針旋轉(zhuǎn) var animationMain = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationDelLots = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationAdd = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationMain.rotateZ(0).step(); animationDelLots.translate(0, 0).rotateZ(0).opacity(0).step(); animationAdd.translate(0, 0).rotateZ(0).opacity(0).step(); this.setData({ animMain: animationMain.export(), animDelLots: animationDelLots.export(), animAdd: animationAdd.export(), }) } }, //解決滾動(dòng)穿透問題 myCatchTouch: function () { return }})在要調(diào)用的頁面json文件引用menu組件(我這里引用了兩個(gè)組件，還有一個(gè)是前面封裝的dialog組件)
"usingComponents": { "dialog": "/components/Dialog/dialog", "menu": "/components/Menu/menu" },然后在調(diào)用的wxml中使用
<!--_addEvent 和 _deleteLotsEvent分別是彈出菜單里面按鈕對(duì)應(yīng)的事件，需要在調(diào)用的js中實(shí)現(xiàn) --><menu hidden id='menu' bind:addEvent="_addEvent" bind:deleteLotsEvent="_deleteLotsEvent" />
調(diào)用menu組件的js中實(shí)現(xiàn)菜單中item的點(diǎn)擊事件
_addEvent: function(){ //do something }, _deleteLotsEvent: function(){ //do something }整體代碼實(shí)現(xiàn)就這么多，代碼比較簡(jiǎn)單，如果有不清楚的童鞋，請(qǐng)留言，我將為你們解答。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
