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

HarmonyOS
2天前
浏览
收藏 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;
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 怎么自定义TabTabbar
21浏览 • 1回复 待解决
想实现tabBar多个tab滚动
313浏览 • 1回复 待解决
HarmonyOS Tab指定默认Index
27浏览 • 1回复 待解决
Tab组件Tabbar中字体颜色如何修改
1317浏览 • 1回复 待解决
Tab导航栏tabbar子组件突出上沿显示
2266浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居左
572浏览 • 1回复 待解决
HarmonyOS tab组件页签该怎么实现
59浏览 • 1回复 待解决
HarmonyOS Tab控件bar怎么居左显示?
46浏览 • 1回复 待解决
HarmonyOS 怎么取消 Text默认内边距
479浏览 • 1回复 待解决
openharmony如何配置默认走usb声卡播放
127浏览 • 0回复 待解决