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.结合事件,来实现高亮的切换效果
- 用状态变量保存,onChange,ontabBarC