微信小程序實現(xiàn)炫酷的彈出式菜單特效
更新時間：2019年01月28日 16:24:09 作者：abs625
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)炫酷的彈出式菜單特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家?guī)硪粋€微信小程序的彈出是菜單效果，老規(guī)矩先上效果圖。(錄制的gif動畫有點卡，實際真機或是模擬器上很順暢)
先簡單說下思路：
1、首先在屏幕的某個位置放幾個懸浮按鈕，放幾個看你需要的功能
2、點擊最上層(wxml中最后一個就是最上層)的的按鈕后增加背景遮罩，這個遮罩在我前面自定義modal彈框時有用到
3、分別對按鈕做旋轉和移動動畫和透明度，造成動畫差異就是位移的動畫距離不同
4、收起的時候回到原來位置并且讓透明度變成0就ok了
思路說完了，下面開始上實現(xiàn)代碼，這里同樣也是封裝成了組件，方便調(diào)用。
首先是wxml實現(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邏輯實現(xiàn)
// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
isShow: false,//是否已經(jīng)彈出
animMain: {},//旋轉動畫
animAdd: {},//item位移,透明度
animDelLots: {},//item位移,透明度
},
/**
* 組件的方法列表
*/
methods: {
//點擊彈出或者收起
showOrHide: function () {
if (this.data.isShow) {
//縮回動畫
this.takeback();
this.setData({
isShow: false
})
} else {
//彈出動畫
this.popp();
this.setData({
isShow: true
})
}
},
add: function () {
this.triggerEvent("addEvent")
this.showOrHide()
},
deleteLots: function () {
this.triggerEvent("deleteLotsEvent")
this.showOrHide()
},
//彈出動畫
popp: function () {
//main按鈕順時針旋轉
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(),
})
},
//收回動畫
takeback: function () {
//main按鈕逆時針旋轉
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(),
})
}
},
//解決滾動穿透問題
myCatchTouch: function () {
return
}
})
在要調(diào)用的頁面json文件引用menu組件(我這里引用了兩個組件，還有一個是前面封裝的dialog組件)
"usingComponents": {
"dialog": "/components/Dialog/dialog",
"menu": "/components/Menu/menu"
},
然后在調(diào)用的wxml中使用
<!--_addEvent 和 _deleteLotsEvent分別是彈出菜單里面按鈕對應的事件，需要在調(diào)用的js中實現(xiàn) --> <menu hidden id='menu' bind:addEvent="_addEvent" bind:deleteLotsEvent="_deleteLotsEvent" />
調(diào)用menu組件的js中實現(xiàn)菜單中item的點擊事件
_addEvent: function(){
//do something
},
_deleteLotsEvent: function(){
//do something
}
整體代碼實現(xiàn)就這么多，代碼比較簡單，如果有不清楚的童鞋，請留言，我將為你們解答。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript高級定時器，針對javascript的代碼隊列進行詳細解析，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了javascript頁面倒計時實現(xiàn)方法,可實現(xiàn)簡單的頁面倒計時及自動提交表單功能,非常簡單實用,需要的朋友可以參考下2015-07-07
jQuery實現(xiàn)鼠標放置名字上顯示詳細內(nèi)容氣泡提示框效果的方法分析
這篇文章主要介紹了jQuery實現(xiàn)鼠標放置名字上顯示詳細內(nèi)容氣泡提示框效果的方法,結合實例形式分析了jQuery結合bootstrap插件實現(xiàn)的鼠標響應式提示框相關操作技巧,需要的朋友可以參考下2020-04-04
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了Bootstrap3.0學習教程之JS折疊插件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
這篇文章介紹了使用js修改客戶端注冊表的方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了js實現(xiàn)人才網(wǎng)站職位選擇功能的方法,涉及javascript動態(tài)操作頁面元素結點的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了javascript系統(tǒng)時間設置操作,涉及javascript時間運算與判斷相關操作技巧,需要的朋友可以參考下2019-06-06
模塊化簡單來說就是將一個完整的長篇代碼文件根據(jù)功能進行劃分成幾個文件，這些文件各自負責一個獨立的功能，各個文件組合起來實現(xiàn)一個完整的大功能，這就是模塊化，每個負責獨立功能的文件就是模塊。2021-05-05
這篇文章主要介紹了Javascript中大括號“{}”的多義性。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12