鸿蒙模拟当当网底部导航栏的功能【华为根技术】

import { BottomNav } from '../common/BottomNav'
import { Buy } from './Buy'
import { Cart } from './Cart'
import { Category } from './Category'
import { Detail } from './Detail'
import { My } from './My'

@Entry
@Component
struct Index {
  // @State message: string = 'Hello World';
  @Provide("pageInfos") pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'category') {
      Category()
    } else if (name === 'buy') {
      Buy()
    } else if (name === "cart") {
      Cart()
    } else if (name === 'my') {
      My()
    } else if (name === 'detail') {
      Detail()
    }
  }

  @Styles bk(){
    .border({width: 1, color: '#f00'})
  }
  aboutToAppear(): void {
    //关闭导航转场的效果
    this.pageInfos.disableAnimation(true)
  }
  build() {
    Navigation(this.pageInfos){
      //1. 内容区
      Scroll(){
        Column(){
          Text("首页的内容区")
        }
        .height('130%')
        .width('80%')
        .bk()
      }
      .layoutWeight(1)

      //2. 底部导航
      BottomNav({activeIndex: 0})
    }
    .navDestination(this.PageMap)
    .hideTitleBar(true)
    .hideToolBar(true)
  }
}

export interface NavItemModel {
  unselectedImg: string,
  selectedImg: string,
  title: string,
  name: string
}

export const BottomNavData: NavItemModel[] = [
  {
    unselectedImg: 'home',
    selectedImg: 'activeHome',
    title: '首页',
    name: ''
  },
  {
    unselectedImg: 'star',
    selectedImg: 'activeStar',
    title: '分类',
    name: 'category'
  },

  {
    unselectedImg: 'message',
    selectedImg: 'activeMessage',
    title: '值得买',
    name: 'buy'
  },
  {
    unselectedImg: 'people',
    selectedImg: 'activePeople',
    title: '购物车',
    name: 'cart'
  },
  {
    unselectedImg: 'star',
    selectedImg: 'activeStar',
    title: '个人中心',
    name: 'my'
  }
]

import { BottomNavData, NavItemModel } from "../model/BottomNavModel"

@Component
export struct BottomNav {
  @Consume("pageInfos") pageInfos: NavPathStack
  @State navList: NavItemModel[] = []
  @Prop activeIndex: number = 0

  aboutToAppear(): void {
    this.navList = BottomNavData
  }
  build() {
    Row() {
      ForEach(this.navList,(item: NavItemModel,index: number)=>{
        Column() {
          if (this.activeIndex === index){
            Image($r(`app.media.${item.selectedImg}`))
              .width(20)
              .height(20)
          }else{
            Image($r(`app.media.${item.unselectedImg}`))
              .width(20)
              .height(20)
          }
          Text(item.title)
        }
        .onClick(()=>{
           if (index === 0){
             this.pageInfos.clear()
           }else{
             this.pageInfos.pushPath({name: item.name})
           }
        })
      }, (item:NavItemModel)=>item.title)

    }
    .justifyContent(FlexAlign.SpaceAround)
    .width('100%')
    .height(50)
    .border({width: 1})
  }
}

import { BottomNav } from "../common/BottomNav"

@Component
export struct Category {
  build() {
    NavDestination(){
      Column(){
        Text("分类页面")
      }
      .layoutWeight(1)
      BottomNav({activeIndex: 1})
    }
  }
}

import { BottomNav } from "../common/BottomNav"

@Component
export struct Buy{
  build() {
    NavDestination(){
      Column(){
        Text("值得买页面")
      }
      .layoutWeight(1)
      BottomNav({activeIndex: 2})
    }
  }
}

import { BottomNav } from "../common/BottomNav"

@Component
export struct Cart{
  build() {
    NavDestination(){
      Column(){
        Text("购物车页面")
      }
      .layoutWeight(1)
      BottomNav({activeIndex: 3})
    }
  }
}

import { BottomNav } from "../common/BottomNav"

@Component
export struct My{
  build() {
    NavDestination(){
      Column(){
        Text("个人中心页面")
      }
      .layoutWeight(1)
      BottomNav({activeIndex: 4})
    }
  }
}

@Component
export struct Detail{
  build() {
    NavDestination(){
      Column(){
        Text("个人中心页面")
      }
    }
  }
}