HarmonyOS之JS UI底部导航栏tabBar

效果：

效果.png

文件结构：

文件结构.png
index.hml

<element name='index-page' src='./index/index.hml'></element>
<element name='mine' src='./mine/mine.hml'></element>
<div>
    <index-page if="{{activePage === 'index'}}"></index-page>
    <mine if="{{activePage === 'mine'}}"></mine>
    <toolbar style="position: fixed; bottom: 0px">
        <toolbar-item style="text-color: {{ activePage===$item.page?'#288FFF':'#BBBBBB' }};" for="tabbarDes" icon='{{ activePage===$item.page? $item.activeImg:$item.normalImg }}' value='{{$item.txt}}' @click="showPage($item)"></toolbar-item>
    </toolbar>
</div>

index.js

export default {
   data: {
       title: "",
       activePage: "index",
       tabbarDes: [
           {
               txt: '首页',
               page: 'index',
               normalImg: 'common/images/tabbar/index.png',
               activeImg: 'common/images/tabbar/index-checked.png'
           },
           {
               txt: '我的',
               page: 'mine',
               normalImg: 'common/images/tabbar/mine.png',
               activeImg: 'common/images/tabbar/mine-checked.png'
           },
       ]
   },
   onInit() {},
   showPage(data) {
       this.activePage = data.page
   },
}