第四章Tabs4.1结构

Tabs() {
  TabContent() {//只能有一个子组件
  // 内容
  }
  .tabBar('首页')//导航栏
}

3.2常用属性

.vertical(false)（设置导航栏水平或垂直，false为水平，true为垂直，一般默认为false）.barPosition(BarPosition.End)（设置导航栏在顶部或结尾，一般默认为顶部）

.scrollable(true)（控制页面能否华滑动，一般默认为true滑动）

.barMode(BarMode.Scrollable)（控制导航栏滑动，一般默认不滚动）

.animationDuration(0)（控制页面滑动时所用的动画时间）

@Entry
@Component
struct Practice {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页的内容')
            .fontSize(50)
        }
        .tabBar('首页')
        TabContent() {
          Text('推荐的内容')
            .fontSize(50)
        }
        .tabBar('推荐')
        TabContent() {
          Text('消息的内容')
            .fontSize(50)
        }
        .tabBar('消息')
        TabContent() {
          Text('我的的内容')
            .fontSize(50)
        }
        .tabBar('我的')
      }
      .vertical(false)
      .barPosition(BarPosition.End)
      .scrollable(true)
      .animationDuration(0)
    }
    .height('100%')
    .width('100%')
  }
}

滚动导航栏

@Component
struct Practice {
  @State message: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']
  build() {
    Column() {
      Tabs() {
        ForEach(this.message, (item: string) => {
          TabContent() {
            Text(item + '的内容')
              .fontSize(50)
          }
          .tabBar(item)
        })
      }
      .barMode(BarMode.Scrollable)
    }
    .height('100%')
    .width('100%')
  }
}

3.3Tabs组件的事件：

.onChange((index)=>{}) （tabs导航栏点击或滑动事件完成后获取其所在页面的索引值）.onTabBarClick((index)=>{}) （tabs导航栏点击后立即获取其所在页面的索引值）（滑动不触发）

@Entry
@Component
struct Practice {
  @State message: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']
  build() {
    Column() {
      Tabs() {
        ForEach(this.message, (item: string) => {
          TabContent() {
            Text(item + '的内容')
              .fontSize(50)
          }
          .tabBar(item)
        })
      }
      .onTabBarClick((index) => {
        AlertDialog.show({ message: index + '' })
      })
      .barMode(BarMode.Scrollable)
    }
    .height('100%')
    .width('100%')
  }
}

3.4自定义tabs和导航栏高亮设置

1.将导航栏所要的外观通过@Builder封装然后交给tabar调用2.高亮则是先设置一个变量isActive，然后通过Tabs的onChange事件获取对应页面的索引并传给isActive，再用三元表达式将isActive与导航栏对应的内容进行比较实现高亮

interface messageStyle {
  img: string
  icon?: string
  title?: string
}
@Entry
@Component
struct Tab1 {
  @State isActive: string = '首页'
  @Builder
  tabBuilder(img: string, title: string, selectedimg: string, index: number) {
    Row() {
      if (index === 2) {
        Badge({
          value: '上新',
          position: { x: 12, y: 0 },
          style: {}
        }) {
          Image($r(img))
            .width(50)
            .position({ x: -20 })
        }
      } else if (index === 3) {
        Badge({
          value: '7',
          position: { x: 10, y: -5 },
          style: {}
        }) {
          Column() {
            Image(this.isActive === title ? $r(selectedimg) : $r(img))
              .width(30)
            Text(title)
              .fontSize(12)
              .width(40)
              .fontColor(this.isActive === title ? 'red' : '')
              .textAlign(TextAlign.Center)
          }
        }
      } else {
        Column() {
          Image(this.isActive === title ? $r(selectedimg) : $r(img))
            .width(30)
          Text(title)
            .fontSize(12)
            .width(40)
            .fontColor(this.isActive === title ? 'red' : '')
            .textAlign(TextAlign.Center)
        }
      }
    }
    .padding({ left: 28, right: 28 })
    .width('100%')
  }
  @State message: messageStyle[] = [
    {
      img: 'app.media.ic_tabbar_icon_0',
      icon: 'app.media.ic_tabbar_icon_0_selected',
      title: '首页'
    },
    {
      img: 'app.media.ic_tabbar_icon_1',
      icon: 'app.media.ic_tabbar_icon_1_selected',
      title: '逛'
    },
    {
      img: 'app.media.ic_share_sina',
    },
    {
      img: 'app.media.ic_tabbar_icon_2',
      icon: 'app.media.ic_tabbar_icon_2_selected',
      title: '购物车'
    },
    {
      img: 'app.media.ic_tabbar_icon_3',
      icon: 'app.media.ic_tabbar_icon_3_selected',
      title: '我的'
    }
  ]
  build() {
    Column() {
      Tabs() {
        ForEach(this.message, (item: messageStyle, index: number) => {
          TabContent() {
            Text(item.title + '的内容')
              .fontSize(30)
          }
          .margin({ bottom: 10 })
          .tabBar(this.tabBuilder(item.img, item.title!, item.icon!, index))
          .backgroundColor(Color.Pink)
        })
      }
      .layoutWeight(1)
      .animationDuration(0)
      .barPosition(BarPosition.End)
      .backgroundColor(Color.White)
      .onChange((index) => {
        this.isActive = this.message[index].title!
      })
    }
    .padding({ bottom: 10 })
    .height('100%')
    .width('100%')
  }
}