容器组件Tabs如何自定义 tabBar-高亮切换

1.TabBar 如果放在底部的话,一般会显示图形文字,甚至有特殊的图标,如果要实现此类效果,就需要 自定义tabBar

Tabs() {
    TabContent() {
        // 内容略
    }
    .tabBar(this.tabBarBuilder())
  }

@Builder
tabBarBuilder() {
  // 自定义的Tabbar结构
}

2.自定义TabBar 之后,高亮的切换效果就没有了,需要自行实现,首先咱们得知道什么时候进行了切换

onChange(event: (index: number) => void)

Tab页签切换后触发的事件。

- index:当前显示的index索引,索引从0开始计算。

滑动切换、点击切换 均会触发

onTabBarClick(event: (index: number) => void)10+

Tab页签点击后触发的事件。

- index:被点击的index索引,索引从0开始计算。

3.结合事件,来实现高亮的切换效果

  1. 用状态变量保存,onChange,ontabBarC
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值