一、自定义底部导航栏组件创建

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。
3. 使用toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
4. 导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中。
5. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

二、自定义组件调用

自定义组件通过element引入到宿主页面，使用方法：

     首页        

三、  路由跳转

• 导入路由模块

import router from '@system.router';

• router.push(OBJECT)，跳转到应用内的指定页面。

jump(index){// this.tabbarItems.forEach((item,index) => {//     item.img = tabbarItems[index].img;// });// this.tabbarItems[index].img = this.tabbarItems[index].simg; switch(index){     case 0:     // index页面，uri字段是页面路由，由配置文件中的pages列表指定。  router.push({      uri: 'pages/home/index',      params:{   info:"这是路由传递的参数"      }  });     break;     case 1:     // index页面，uri字段是页面路由，由配置文件中的pages列表指定。  router.push({      uri: 'pages/about/index',      params:{   info:"这是路由传递的参数"      }  });  break;     case 2:     // index页面，uri字段是页面路由，由配置文件中的pages列表指定。  router.push({      uri: 'pages/news/index',      params:{   info:"这是路由传递的参数"      }  });  break;     case 3:     // index页面，uri字段是页面路由，由配置文件中的pages列表指定。  router.push({      uri: 'pages/me/index',      params:{   info:"这是路由传递的参数"      }  });  break; }    }