目录
一、自定义组件
创建
JS UI框架支持自定义组件,用户可根据业务需求将已有的组件进行扩展,增加自定义的私有属性和事件,封装成新的组件,方便在工程中多次调用,提高页面布局代码的可读性。
- 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css,需要注意的是:3个文件的文件名必须保持一致,不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
- 设置底部选项卡对应的 json 数据源,用来保存 icon 图片、标题,以及点击选中后的 icon 图片。
- 在common下创建一个文件夹来存放数据,并在js下把这组数据导入。
调用
-
name 属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写,src 属性指自定义组件hml 文件路径(必填),若没有设置 name 属性,则默认使用 hml 文件名作为组件名。
-
事件绑定:自定义组件中绑定子组件事件使用 (on|@)child1 语法,子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值,父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。
二、页面跳转
1.导入
import router from '@system.router';
2.绑定对应的事件,并且使用router.push