Tabs的使用居然是这样的！！！，万万没想到......

鸿蒙深入探索的第二次总结

Tabs的基本使用

Tabs的结构

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

Tabs的属性

.scrollable(false/true)可控制两个页面之间是否滑动
.barMade(BarMade.scrollable/fixed) 控制导航栏是否可以滑动
.barPosition(BarPosition.Start/end) 控制导航栏位置头部或者底部
.vertical(false)//导航栏是否纵向
.animationDuration(0)//动画滑动时间

Tabs的两个重要事件

名称	功能描述
onChange(event: (index: number) => void)	Tab页签切换后触发的事件。- index：当前显示的index索引，索引从0开始计算。滑动切换、点击切换 均会触发
onTabBarClick(event: (index: number) => void)10+	Tab页签点击后触发的事件。- index：被点击的index索引，索引从0开始计算。

设置高亮切换
.onChange((index) => {
     this.index1=index
    })//获得点击或者切换到的索引值
 .onTabBarClick((index) => {
     this.index1=index 
    })//获得点击到子组件的索引值
    然后可进行三元表达式的判断