HarmonyOS学习之路由实现界面跳转
HarmonyOS学习之路由实现界面跳转
-
-
- 在阿里的icon库中下载相应图标
- 具体代码
-
在阿里的icon库中下载相应图标
搞定最下面的图标之后,进行路径的配置
首先导入路由模块:
import router from '@system.router';
导入后进行函数的编写,利用router.push(OBJECT)
完成界面的跳转
具体代码
如下:
tabbar.hml
<div class="container"> <toolbar class="tabbar"> <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' onclick="jump($idx)" ></toolbar-item> </toolbar></div>
tabbar.css
.tabbar { position: fixed; left: 0; bottom: 0;}
tabbar.js
import tabbarItems from '../../common/datas/tabbarItems.js';import router from '@system.router';export default { data:{ tabbarItems }, props:{ index:{ type:Number, default(){return 0; } } }, jump(index){ switch(index){ case 0: router.push({ uri:"pages/index/index", params:{ info:"传递了一个参数" } }); break; case 1: router.push({ uri:"pages/news/news", params:{ info:"传递了一个参数" } }); break; case 2: router.push({ uri:"pages/about/about", params:{ info:"传递了一个参数" } }); break; case 3: router.push({ uri:"pages/me/me", params:{ info:"传递了一个参数" } }); break; } }}
在其他界面引入导航栏即可,如:
<element name='comp' src='../../components/tabbar/tabbar.hml'></element><div class="container"> <text class="title"> 首页 </text> <text>{{info}}</text> <comp index="0" ></comp></div>