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>