微信小程序自定义组件 - 弹出菜单演示

前言

在我7月看到老师的视频之前，当我把它介绍给模板时，老师在7月份说这个模板有一个缺点。这可能意味着包装还不够。只有页面和样式是模板化的，逻辑无法写入。我对此事也非常困惑。今天我学会了自定义组件的概念，我试过了，我觉得我弥补了模板的缺点，所以我写了一个小的demo，这也是一个注释

我想

如果您不需要传递参数，则无需在外部发送事件。您可以使用include，这相当于直接复制布局。如果需要传递参数，但不需要将事件发送到外部，可以使用模板，如果可以，如果需要传递参数并需要关联某些事件，则可以使用自定义组件[0x1A1A ]

你做的是菜单组件，数据从外面倒出。

目前，我还在观看如何实现菜单弹出的阻尼动画效果

效果

代码结构如下：

实现

'＆gt;%20

Menu.js%20

Var%20Logger=require（'./utils/Logger.js'）Component（{properties:%20{menu_list:%20Array，}，data:%20{showMenu:%20true}，附加:%20function（）{this.setData（{menu_list:%20this%20.data.menu_list}）}，方法:%20{//单击New按钮onCreateTap:%20function（）{this.setData（{showMenu:this.data.showMenu}）}，//单击展开的单个按钮onItemTap:%20function（Event）{var%20item=event.currentTarget.appdevelopment%20

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的生命周期：

在附加的方法中设置数据选择。

新建组件menu:

查看文档

this.triggerEvent（eventName，eventDetail，eventOption）

eventName：事件名称eventDetail：事件传递的对象，是eventName eventOption中event属性的内容：主要定义eventName事件是否应该冒泡等，但默认为false，你不能设置

还有一个关键点:(实际上，它是在首次创建组件时自动生成的）。如果您手动播放，请记住在menu.json中添加自定义组件声明：

{'component': true，'usingComponents': {}}

Menu.wxml

菜单数量基于传入的menu_list，菜单由showMenu

隐藏 {{item.name}}

菜单的显示内容由外部数据/menu-data.js

控制 Var menu_list=[{id: 1，name:'post'，src:'/resourcess /imgs/icate_create_1.png'}，{id: 2，name:'information'，src:'/resources/imgs/ic_create_2。 Png'}，{id: 3，名称:'照片'，src:'/resources/imgs/ic_create_3.png'}]module.exports={menu_list: menu_list}

在使用它的地方引入数据

triggerEvent

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）{//这里的详细信息是menuEventDetail var item=event.detail.item; Logger.v（'item'，item）; wx.showToast（{title:'new'+ item.name，}）}}）

Home.wxml

HOME

还有一个关键的地方：使用的地方，这里是家，记得在home.json中使用组件（相当于引号前面的别名，使用名称，名称用于wxml）

Home.json

{'usingComponents': {'menu':'/components/menu'}}

门户[p>