【HarmonyOS 鸿蒙 黑马程序员 学习笔记 83.1】

选项卡 Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
子组件
不支持自定义组件作为子组件， 仅可包含子组件TabContent， 以及渲染控制类型if/else和ForEach, 并且if/else和ForEach下也仅支持TabContent, 不支持自定义组件。
官方API说明 点击查看

基础用法 常用属性

Tabs({barPosition:BarPosition.End}){  //  调整位置 开始 或 结尾
      TabContent(){Text(`内容1`)}.tabBar('选项1').backgroundColor('#ccc')
      TabContent(){Text(`内容2`)}.tabBar('选项2').backgroundColor('#bbb')
      TabContent(){Text(`内容3`)}.tabBar('选项3').backgroundColor('#aaa')
    }.vertical(true)  //  是否水平显示  配合调整位置  上下左右都能到达
    .scrollable(true) //  是否可以滑动跳转选项卡
    .animationDuration(3000) //  切换动画时间  毫秒

自定义 TabBar

先建立绑定组件

@Builder tb1 (title : string, img : ResourceStr){
    Column(){
      Image(img).width(40)
      Text(title)
    }
  }

再调用

.tabBar(this.tb1(`选项1`,$r('app.media.1_2')))

高亮设置

先监听再设置

监听动作

.onChange((i:number)=>{}) //  监听滑动和点击
.onTabBarClick((i:number)=>{})  //  只监听点击事件

设置高亮

本质就是设置不同的渲染
所以要进行条件渲染

1. 建立动态渲染变量
2. 三元条件表达式

完整简易演示代码如下

@Entry
@Component
struct Index {
   
   
  @State jd1: string = ''
  @Builder tb1 (tbt2 : number, title