小程序做个菜单组件，，，，，数据由外部灌入。。实现菜单弹出的阻尼动画效果

实现

代码结构如下：

新建组件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: {
    // 点击新建按钮
    onCreateTap: function() {
      this.setData({
        showMenu: !this.data.showMenu
      })
    },
    // 点击睁开的单个按钮
    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是触发事务的选项，，，，，包括设置事务是否冒泡之类的，，，，，不过这里默认是不冒泡的
      // var menuEventOption = {
      //   
      // }
      // this.triggerEvent('handleMenu', menuEventDetail, menuEventOption)
    }
  }
})

参考文档中Component的生命周期：

设置数据选择在attached要领内。。

triggerEvent

审查文档

this.triggerEvent(eventName, eventDetail, eventOption)

• eventName：事务名称
• eventDetail：事务转达的工具，，，，，是eventName这个事务中detail属性中的内容
• eventOption：主要界说eventName这个事务是否要冒泡之类的，，，，，不过默认的都是false，，，，，可以不必设置

尚有个要害的地方：（着实最最先建设component的时间就自动天生了）全手打的话，，，，，要记得在menu.json里添加自界说组件的声明：

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

menu.wxml

菜单个数凭证传入的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>

菜单的显示内容，，，，，由外部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
}

数据在使用的地方引入

组件的使用

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>

尚有个要害的地方：使用的地方，，，，，这里是home，，，，，要记得在home.json中使用该组件（引号前面的相当于又名，，，，，起啥名，，，，，wxml里就用啥名）

home.json

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

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。。通过拖拽、拼接？？榻峁剐〕绦蛏坛且趁，，，，，所看即所得，，，，，只需要美工就能做出细腻商城。。更多小程序市肆请审查：小程序市肆