微信小程序自定義組件之彈出菜單demo

小程序做個(gè)菜單組件，數(shù)據(jù)由外部灌入。實(shí)現(xiàn)菜單彈出的阻尼動(dòng)畫效果

實(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)擊展開的單個(gè)按鈕
    onItemTap: function(event) {
      var item = event.currentTarget.dataset.item;
      // 微信小程序中是通過triggerEvent來給父組件傳遞信息的
      //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è)置事件是否冒泡之類的，不過這里默認(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è)事件是否要冒泡之類的，不過默認(rèn)的都是false，可以不用設(shè)置

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

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

menu.wxml

菜單個(gè)數(shù)根據(jù)傳入的menu_list來，菜單顯隱由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"
  }
}

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店