小程序开发（7）

自定义组件

1.用户定义组件的含义

小程序通常有一些常见的交互模块，如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能在多个页面中使用，逻辑相对独立。因此，在这种情况下，基本小程序库提供了一个特性，允许开发人员自己创建界面组件，称为“自定义组件”。有了这个特性，开发人员可以将这样的交互模块抽象为接口组件。

2.适用场景

多个场景使用相同的东西

3.创建自定义组件

（1） 创建新零部件文件夹，然后单击鼠标右键以创建新零部件

（2） tabMenu.json中将有配置

“组件”：true，

（3） 在tabMenu.wxml中编写页面

{{label}}

wx:for=“｛｛list｝｝”wx:key=“index”>{｛item｝｝

（4） 在需要使用此组件的页面的json中进行配置

“使用组件”：{

“tabMenu”：“../../components/tabMenu/tabMenu”

},

（5） 在需要使用此组件的页面的wxml中，使用组件名称作为标签

bind:syncData=“syncData”><；/选项卡菜单>

bind:syncData=“syncData”><；/选项卡菜单>

（6） 在选项卡菜单中。js，您需要定义组件的属性列表，该属性应该与要从组件页面传输的属性相对应

属性：{

//定义组件需要传递的属性

标签：{

类型：字符串，

值：“”

},

列表：{

类型：数组

},

活动索引：{

类型：数字，

值：“”

}

},

（7） 在组件的方法列表中，使用此triggerEvent（'component custom event'，'passed parameter'）方法将事件传递给需要此组件的页面

方法：{

//选项单击事件

单击（e）{

//获取数据参数索引

让｛index｝=e.currentTarget.dataset

this.set数据({

//更新突出显示的索引

activeIndex:索引

})

//触发自定义事件，并通过事件对象返回值

this.triggerEvent（“同步数据”，索引）

}

}

（8） 在需要此组件的js中定义所需的数据

糖：[全糖、半糖、少糖、无糖]，

//初始索引

sugarActive：0，

请：[珍珠，红豆，椰子，布丁]，

plActive：2，

Wds:[“正常温度”、“加冰”、“少冰”和“除冰”]，

wdActive：1，

（9） 在需要使用此组件的js中，返回的事件用于解构e中的detail属性。detail是从组件传递的参数索引

//同步组件返回的数据

同步数据（e）{

//获取数据参数

让｛active｝=e.currentTarget.dataset

//获取组件返回的值

设{detail}=e

this.set数据({

//重新分配指定的活动

[活动]：详细信息

})

},

页面显示