微信小程序怎么實(shí)現(xiàn)菜單彈出的阻尼動(dòng)畫(huà)效果

本篇內(nèi)容主要講解“微信小程序怎么實(shí)現(xiàn)菜單彈出的阻尼動(dòng)畫(huà)效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)菜單彈出的阻尼動(dòng)畫(huà)效果”吧!

實(shí)現(xiàn)

代碼結(jié)構(gòu)如下：

新建組件menu:

menu.js

var Logger = require('../utils/Logger.js')

Component({
  properties: {
    menu_list: Array,
  },

  data: {
    showMenu: true
  },

  attached: function() {
    this.setData({
      menu_list: this.data.menu_list
    })
  },
  methods: {
    // 點(diǎn)擊新建按鈕
    onCreateTap: function() {
      this.setData({
        showMenu: !this.data.showMenu
      })
    },
    // 點(diǎn)擊展開(kāi)的單個(gè)按鈕
    onItemTap: function(event) {
      var item = event.currentTarget.dataset.item;
      // 微信小程序中是通過(guò)triggerEvent來(lái)給父組件傳遞信息的
      //triggerEvent：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
      var menuEventDetail = {
        item
      }
      this.triggerEvent('handleMenu', menuEventDetail)
      //menuEventOption是觸發(fā)事件的選項(xiàng)，包括設(shè)置事件是否冒泡之類的，不過(guò)這里默認(rèn)是不冒泡的
      // var menuEventOption = {
      //   
      // }
      // this.triggerEvent('handleMenu', menuEventDetail, menuEventOption)
    }
  }
})

參考文檔中Component的生命周期：

設(shè)置數(shù)據(jù)選擇在attached方法內(nèi)。

triggerEvent

查看文檔

this.triggerEvent(eventName, eventDetail, eventOption)

• eventName：事件名稱

• eventDetail：事件傳遞的對(duì)象，是eventName這個(gè)事件中detail屬性中的內(nèi)容

• eventOption：主要定義eventName這個(gè)事件是否要冒泡之類的，不過(guò)默認(rèn)的都是false，可以不用設(shè)置

還有個(gè)關(guān)鍵的地方：（其實(shí)最開(kāi)始創(chuàng)建component的時(shí)候就自動(dòng)生成了）全手打的話，要記得在menu.json里添加自定義組件的聲明：

{  "component": true,  "usingComponents": {}
}

menu.wxml

菜單個(gè)數(shù)根據(jù)傳入的menu_list來(lái)，菜單顯隱由showMenu控制

<view class='container'>
  <view hidden="{{showMenu?false:true}}" class='sub-btn-container'><block wx:for='{{menu_list}}' wx:key='index'>  <view class='sub-btns' catchtap='onItemTap' data-item='{{item}}'><image class='btn' src='{{item.src}}' /><text class='sub-btn__name'>{{item.name}}</text>  </view></block>
  </view>
  <image catchtap='onCreateTap' class='btn' src='/resources/imgs/ic_create.png' />
</view>

菜單的顯示內(nèi)容，由外部datas/menu-data.js控制

var menu_list = [{
  id: 1,
  name: '帖子',
  src: '/resources/imgs/ic_create_1.png'}, {
  id: 2,
  name: '資訊',
  src: '/resources/imgs/ic_create_2.png'}, {
  id: 3,
  name: '照片',
  src: '/resources/imgs/ic_create_3.png'}]

module.exports = {
  menu_list: menu_list
}

數(shù)據(jù)在使用的地方引入

組件的使用

home.js

var menuData = require('../../datas/menu-data.js')
var Logger = require('../../utils/Logger.js')

Page({
  onLoad: function() {
    this.setData({
      menu_list: menuData.menu_list,
    })
  },
  onReady: function() {
    this.menu = this.selectComponent("#menu");
  },
  handleMenu: function(event) {
    //這里的detail就是在自定義組件中定義的menuEventDetail
    var item = event.detail.item;
    Logger.v("item", item);
    wx.showToast({
      title: '新建' + item.name,
    })
  }
})

home.wxml

<view>
  <!-- handleMenu為父組件和自定義組件之間通信的橋梁 -->
  <menu class='menu' menu_list='{{menu_list}}' bind:handleMenu='handleMenu' />
  <text class='text'>HOME</text>
</view>

還有個(gè)關(guān)鍵的地方：使用的地方，這里是home，要記得在home.json中使用該組件（引號(hào)前面的相當(dāng)于別名，起啥名，wxml里就用啥名）

home.json

{  "usingComponents": {"menu": "/components/menu"
  }
}

到此，相信大家對(duì)“微信小程序怎么實(shí)現(xiàn)菜單彈出的阻尼動(dòng)畫(huà)效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！