#鸿蒙通关秘籍#如何在自定义导航栏的情况下切换至指定页签?

HarmonyOS
2024-12-04 15:14:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Yvr交响COO

使用Tabs提供的onChange事件方法,在内容页和页签变化时同步实现切换:

@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 2

  @Builder tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          // 在这里定义首页内容
        }.tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          // 在这里定义发现内容
        }.tabBar(this.tabBuilder('发现', 1))

        TabContent() {
          // 在这里定义推荐内容
        }.tabBar(this.tabBuilder('推荐', 2))

        TabContent() {
          // 在这里定义我的内容
        }.tabBar(this.tabBuilder('我的', 3))
      }
      .animationDuration(0)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-04 17:29:41
相关问题
希望Tabs位置是否支持自定义
483浏览 • 1回复 待解决
Tabs组件自定义导航UI问题
905浏览 • 1回复 待解决