HarmonyOS 怎么配置tab默认选择的tabBar

HarmonyOS
2024-12-25 08:50:32
2152浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

可以看一下:Tabs接口中的index参数。设置当前显示页签的索引。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#接口

可以参考一下下面的示例demo:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#示例

import { promptAction, router } from '@kit.ArkUI';


let Storage = new LocalStorage();
@Entry(Storage)
@Component
struct intelligentTestBankPage {
  private TabsController: TabsController = new TabsController();

  @State isDataReady:boolean = false;

  @State currentIndex:number =  1;

  async aboutToAppear() {
  }


  async aboutToDisappear() {}

  @Builder tabBarBuilder(title:string,index:number){
    Column() {

      Button(title,{type:ButtonType.Capsule,stateEffect:true})
        .fontSize(20)
        .height(20)
        .backgroundColor(this.currentIndex === index? '#ff3fbffa':Color.Grey)
    }
    .width('100%')
    .onClick(()=>{
      this.currentIndex = index;
      this.TabsController.changeIndex(index);
    })
  }
  build() {
    Column() {
      Column() {
        Column(){
          Text('智能题库')
        }.height(20)
        .margin(5)
        
        Column(){
          // tabs 页签
          Tabs({
            barPosition: BarPosition.Start,
            index: this.currentIndex,
            controller: this.TabsController
          }) {
            TabContent() {
              // 题库
              Text('题库内容').fontSize(30)
            }
            .tabBar(this.tabBarBuilder('题库', 0))

            TabContent() {
              // 考点速记
              Text('考点速记内容').fontSize(30)
            }
            .tabBar(this.tabBarBuilder('考点速记', 1))
          }
          .scrollable(true)
          .barMode(BarMode.Fixed)
          .vertical(false)
          .barWidth('100%')
          .barHeight(30)
          .animationDuration(400)
          .width('100%')
          .margin(2)

        }.margin(5)
        
      }.height('100%')
      .justifyContent(FlexAlign.Start)
      .width('100%')
    }
    .height('100%')
    .justifyContent(FlexAlign.Start)

  }
}

interface  paramsClass{
  currentIndex:number;
  title:string;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
分享
微博
QQ
微信
回复
2024-12-25 10:17:40


相关问题
HarmonyOS 怎么自定义TabTabbar
724浏览 • 1回复 待解决
想实现tabBar多个tab滚动
1091浏览 • 1回复 待解决
HarmonyOS Tab指定默认Index
602浏览 • 1回复 待解决
Tab组件Tabbar中字体颜色如何修改
2341浏览 • 1回复 待解决
Tab导航栏tabbar子组件突出上沿显示
3104浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居左
1155浏览 • 1回复 待解决
HarmonyOS Tab控件bar怎么居左显示?
583浏览 • 1回复 待解决
HarmonyOS tab组件页签该怎么实现
650浏览 • 1回复 待解决