HarmonyOS Tab指定默认Index

Tabs如何指定初始Index，已经尝试在aboutToAppear对tabController指定changeIndex()和声明Tabs时指定tabIndex()均无效，代码如下：

@Builder
tabBuilder() {
  Tabs({ controller: this.tabsController, barPosition: BarPosition.Start }) {
    ForEach(this.tabList, (tab: HomeTabs, index: number) => {
      TabContent() {
        if (tab.tagId == HomeSpecialTab.FOLLOW) {
          HomeRecommendListContents()
        } else if (tab.tagId == HomeSpecialTab.RECOMMEND) {
          HomeRecommendListContents()
        } else {
          HomePageListContents({
            tab: tab,
            targetTabIndex: index
          })
        }
      }.tabBar(this.tabBarBuilder(tab.tagName, index))
    })
  }
  .tabIndex(1)
  .barMode(BarMode.Scrollable)
  .barBackgroundColor(Color.Transparent)
  .onChange((index: number) => {
    this.currentIndex = index
  })
}

aboutToAppear(): void {
  this.tabsController.changeIndex(1)
}

tabLists是本地数据源，有两个tab。

HarmonyOS

fox280

2024-12-25 12:37:03

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

参考示例如下，只要修改currentPageIndex的默认值就可以了，当前默认为1，初始显示第二个tab：

@Entry
@Component
struct Index {
  @StorageLink('IndexPage') currentPageIndex: number = 1;
  @State shopListData: Array<ShopData> = [new ShopData()]

  aboutToAppear(): void {
    ShopListModel.getShopList('').then((shopListData: ShopData[]) => {
      this.shopListData = shopListData
      Logger.debug('shopListData', JSON.stringify(shopListData));
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Home()
        }
        .tabBar(this.BottomNavigation(buttonInfo[CommonConstants.HOME_INDEX]))

        TabContent() {
          ShopCart()
        }
        .tabBar(this.BottomNavigation(buttonInfo[CommonConstants.SHOP_CART_INDEX]))

        TabContent() {
          PersonalComponent()
        }
        .tabBar(this.BottomNavigation(buttonInfo[CommonConstants.PERSONAL_INDEX]))

      }
      .barWidth(CommonConstants.THOUSANDTH_1000)
      .barHeight(CommonConstants.DEFAULT_48VP)
      .vertical(false)
      .barMode(BarMode.Fixed)
      .scrollable(false)
      .onChange((index: number) => {
        this.currentPageIndex = index;
      })
    }
    .backgroundColor($r('app.color.page_background'))
  }

  @Builder
  BottomNavigation(button: ButtonInfoModel) {
    Column({ space: CommonConstants.SPACE_2 }) {
      Image(this.currentPageIndex === button.index ? button.selectImg : button.img)
        .objectFit(ImageFit.Contain)
        .width(CommonConstants.DEFAULT_24VP)
        .height(CommonConstants.DEFAULT_24VP)
      Text(button.title)
        .fontColor(this.currentPageIndex === button.index ? $r('app.color.focus_color') : Color.Black)
        .opacity(this.currentPageIndex === button.index ? CommonConstants.OPACITY_10 : CommonConstants.OPACITY_4)
        .fontWeight(CommonConstants.FONT_WEIGHT_500)
        .textAlign(TextAlign.Center)
        .fontSize(CommonConstants.FONT_SIZE_10)
    }
    .width(CommonConstants.THOUSANDTH_1000)
    .height(CommonConstants.THOUSANDTH_1000)
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

2024-12-25 16:07:15

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Tab指定默认Index

订阅鸿蒙技术特刊，精选内容抢先看