效果图如下：
image.png
image.png
image.png
示例代码如下:
private scroller: Scroller = new Scroller();
@State private currentIndex: number = 0
@State private homeTabs: Array<string> = new Array()
@Builder
list() {
List({ scroller: this.scroller }) {
ListItem() {
//上滑时需要折叠的部分
this.topScroll()
}
//需要悬浮的tab
ListItem() {
Tabs({ index: this.currentIndex }) {
ForEach(this.homeTabs, (tabBO: string, index) => {
TabContent() {
//tab对应的内容页
this.tabContent(tabBO)
}
.tabBar(this.tabBuilder(tabBO.tabName, index))
})
}
.barWidth(Dimens.dimen(285))
.barHeight(Dimens.dimen(55))
.barBackgroundColor(Colors.transparent)
.backgroundColor(Colors.transparent)
.barMode(BarMode.Fixed)
.scrollable(false) //禁止滑动，因为滑动的时候顶部tab的切换会滞后，并且滑动到艺术品之后还能左滑
.onChange((index) => {
this.currentIndex = index
})
}
}
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
@Builder
tabBuilder(title: string, index: number) {
//TabBtn是我们自己自定义的组件，可以先替换成Text()尝试
TabBtn({
text: title,
selectStatus: this.currentIndex == index,
scene: KButtonScene.PRIMARY,
focusEnhance: true,
optionWidth: 'auto',
btnClick: () => {
this.currentIndex = index
this.isScrollToTop = !this.isScrollToTop
}
})
.padding({ left: 10, right: 10 })
}
