HarmonyOS NEXT星河版之实战微信TabsBar

一、目标

实现微信底部导航，如图：

二、开撸

2.1 封装TabItem实体

export interface TabInterface {
  name: string
  icon: ResourceStr
  selectIcon: ResourceStr
  title: string
}

2.2 Mock数据

该部分数据可从网络接口获取，此处为mock，如下：

export const mockTabList: TabInterface[] = [{
  icon: $r("app.media.ic_public_message"),
  selectIcon: $r('app.media.ic_public_message_filled'),
  name: 'wechat',
  title: '微信',
}, {
  icon: $r('app.media.ic_public_contacts_group'),
  selectIcon: $r('app.media.ic_public_contacts_group_filled'),
  name: 'connect',
  title: '联系人',
}, {
  icon: $r('app.media.ic_gallery_discover'),
  selectIcon: $r('app.media.ic_gallery_discover_filled'),
  name: 'discover',
  title: '发现',
}, {
  icon: $r('app.media.ic_public_contacts'),
  selectIcon: $r('app.media.ic_public_contacts_filled'),
  name: 'my',
  title: '我',
}]

2.3 主页面

import { TabInterface, mockTabList } from './wxmodel'

@Entry
@Component
struct WeChatTabBarDemoPage {
  // Tab数据集合
  tabList: TabInterface[] = mockTabList
  // 默认选择TAB
  @State currentIndex: number = 0

  @Builder
  getTabBar(item: TabInterface, index: number) {
    Column({ space: 5 }) {
      Image(this.currentIndex === index ? item.selectIcon : item.icon)
        .width(20)
        .height(20)
      Text(item.title)
        .fontSize(12)
        .fontColor(this.currentIndex === index ? '#1AAD19' : Color.Black)
    }
  }

  build() {
    //  从API version 10开始，该参数支持$$双向绑定变量
    Tabs({ index: $$this.currentIndex }) {
      ForEach(this.tabList, (item: TabInterface, index: number) => {
        TabContent() {
          Text(item.title)
        }.tabBar(this.getTabBar(item, index))
      }, (item: TabInterface) => JSON.stringify(item))
    }
    .height('100%')
    .barPosition(BarPosition.End)
    .barMode(BarMode.Fixed)
    .barHeight(60)
    .barBackgroundColor(Color.White)
    // 用于设置区分TabBar和TabContent的分割线样式设置分割线样式，默认不显示分割线
    .divider({
      strokeWidth:1,
      color: '#e5e5e5'
    })
    .backgroundColor('#f7f8f9')
  }
}

2.4 手动切换TAB

在微信TAB，点击切换，将TAB切换到我，如下：

controller: TabsController = new TabsController()

...
Tabs({ index: $$this.currentIndex, controller: this.controller }) {
      ForEach(this.tabList, (item: TabInterface, index: number) => {
        TabContent() {
          Column() {
            if (index === 0) {
              Button('切换到我的')
                .onClick(() => {
                  this.controller.changeIndex(3)
                })
            }
            Text(item.title)
          }
        }.tabBar(this.getTabBar(item, index))
      }, (item: TabInterface) => JSON.stringify(item))
    }
...

三、小结

• $$双向绑定，绑定的变量变化时，会触发UI的同步刷新
• tabsController切换TAB，用于控制Tabs组件进行页签切换