HarmonyOS Tab导航demo

HarmonyOS
2024-12-26 16:13:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa
@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 0

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

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容')
        }.tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          Text('发现的内容')
        }.tabBar(this.tabBuilder('发现', 1))

        TabContent() {
          Text('推荐的内容')
        }.tabBar(this.tabBuilder('推荐', 2))

        TabContent() {
          Text('我的内容')
        }.tabBar(this.tabBuilder('我的', 3))
      }
      .animationDuration(0)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-26 17:16:08
相关问题
HarmonyOS tab切换demo
793浏览 • 1回复 待解决
HarmonyOS 申请获得打样代码-TAB导航
938浏览 • 1回复 待解决
HarmonyOS 应用导航设计完整的demo
1047浏览 • 1回复 待解决
Tab导航栏tabbar子组件突出上沿显示
3281浏览 • 1回复 待解决
HarmonyOS Tab居中问题
764浏览 • 1回复 待解决
HarmonyOS Tab控件咨询
959浏览 • 1回复 待解决
HarmonyOS tab组件无法刷新
959浏览 • 1回复 待解决
HarmonyOS Tab + List 性能优化
1267浏览 • 1回复 待解决
HarmonyOS Tab指定默认Index
823浏览 • 1回复 待解决
HarmonyOS Navigation和Tab组件问题
2444浏览 • 1回复 待解决
HarmonyOS 页面导航
1231浏览 • 1回复 待解决
HarmonyOS 地址导航
791浏览 • 1回复 待解决
HarmonyOS 应用导航
895浏览 • 1回复 待解决
Tab组件问题
863浏览 • 1回复 待解决
HarmonyOS Navigation导航
758浏览 • 1回复 待解决
HarmonyOS Tab组件无法响应onPageShow
1686浏览 • 1回复 待解决