如何实现Tabs页签导航栏切换时,下划线也随之滑动

如何实现Tabs页签导航栏切换时,下划线也随之滑动

HarmonyOS
2024-03-17 14:36:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liqi399

可以使用子页签样式SubTabBarStyle来实现,具体参考如下代码:

// xxx.ets 
@Entry 
@Component 
struct TabsAttr { 
  private controller: TabsController = new TabsController() 
  @State indicatorColor: Color = Color.Blue; 
  @State indicatorWidth: number = 40; 
  @State indicatorHeight: number = 10; 
  @State indicatorBorderRadius: number = 5; 
  @State indicatorSpace: number = 10; 
  @State subTabBorderRadius: number = 20; 
  @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 
 
  build() { 
    Column() { 
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 
        }.tabBar(SubTabBarStyle.of('pink') 
          .indicator({ 
            color: this.indicatorColor, // 下划线颜色 
            height: this.indicatorHeight, // 下划线高度 
            width: this.indicatorWidth, // 下划线宽度 
            borderRadius: this.indicatorBorderRadius, // 下划线圆角半径 
            marginTop: this.indicatorSpace // 下划线与文字间距 
          }) 
          .selectedMode(this.selectedMode) 
          .board({ borderRadius: this.subTabBorderRadius }) 
          .labelStyle({}) 
        ) 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 
        }.tabBar('yellow') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 
        }.tabBar('blue') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 
        }.tabBar('green') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 
        }.tabBar('gray') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 
        }.tabBar('orange') 
      } 
      .vertical(false) 
      .scrollable(true) 
      .fadingEdge(false) 
      .barMode(BarMode.Scrollable) 
      .barHeight(140) 
      .animationDuration(400) 
      .onChange((index: number) => { 
        console.info(index.toString()) 
      }) 
      .backgroundColor(0xF5F5F5) 
      .height(320) 
    }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 
  } 
}

参考链接

子页签样式SubTabBarStyle

分享
微博
QQ
微信
回复
2024-03-18 20:17:49
相关问题
如何给文字添加下划线?
561浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
1659浏览 • 1回复 待解决
希望提供字体是否为下划线文本接口
736浏览 • 1回复 待解决
tab-bar下方的下划线怎么去掉?
3075浏览 • 1回复 待解决
希望Tabs位置是否支持自定义
292浏览 • 1回复 待解决