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