HarmonyOS学习之路由实现界面跳转
在阿里的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>