鸿蒙开发系列教程（十三）--组件导航：Navigation 导航

最新推荐文章于 2024-05-23 23:36:29 发布

huazi99

最新推荐文章于 2024-05-23 23:36:29 发布

阅读量553

点赞数 8

分类专栏：鸿蒙文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/huazi99/article/details/136053428

版权

鸿蒙专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Navigation 导航

Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，

分栏模式

NavigationMode.Split
在这里插入图片描述
完整代码:

@Entry
@Component
struct NavigationExample {
  private arr: string[] = ['男装', '女装', '童装'];

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: '搜索...' })
          .width("90%")
          .height(40)
          .backgroundColor('#FFFFAA')

        List({ space: 12 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              NavRouter() {
                Text("" + item)
                  .width("100%")
                  .height(72)
                  .backgroundColor('#FFFFCC')
                  .borderRadius(24)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text("内容" + item)
                }
                .title("主题" + item)
              }
            }
          }, item => item)
        }
        .width("90%")
        .margin({ top: 12 })
      }
      .title("主导航")
      .mode(NavigationMode.Split)
      //设置菜单栏
      .menus([
        {value: "", icon: "./common/image/a5.svg", action: ()=> {}},
         // {value: "", icon: "./common/image/a5.svg", action: ()=> {}}
      ])
      //设置导航栏
      .toolBar({items: [
        {value: "首页", icon: "./common/image/a2.svg", action: ()=> {}},
        {value: "购物车", icon: "./common/image/a3.svg", action: ()=> {}},
        {value: "订单", icon: "./common/image/a4.svg", action: ()=> {}}
      ]})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3DD')
  }
}