微信小程序-自定义组件

注意：目前自定义组件相关特性处于公测阶段。如果需要使用相关特性，请确认在项目选项中已勾选“预览/上传时使用新特性”。
从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

实现控件效果图

效果.gif

创建自定义组件segment

类似于页面，一个自定义组件由 json、wxml、wxss、js 4个文件组成。

segment.png

1、在segment.json 文件中进行自定义组件声明（将 component 字段设为 true）

segment.json

2、在segment.js实现属性定义（标题组和被选位置）以及组件事件

segment.js

3、界面排版（segment.wxml）&样式（segment.wxss）

segment.wxml

segment.wxss

Page中使用自定义组件（作者的page命名为component）

1、在component.json中声明要引用自定义组件

image.png

2、然后就可以在component.wxml布局中使用组件

image.png

titles：要显示的标题组，如['首页','我的']
selected-index：被选中的位置索引（selectedIndex）

3、被绑定数据&事件监听

image.png

到此，结束！！！