微信小程序-自定义组件

注意:目前自定义组件相关特性处于公测阶段。如果需要使用相关特性,请确认在项目选项中已勾选“预览/上传时使用新特性”。
从小程序基础库版本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

到此,结束!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容