欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?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)畫有點(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)畫和透明度，造成動(dòng)畫差異就是位移的動(dòng)畫距離不同

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)畫
 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)穿透問(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)文章

最新評(píng)論