废话不多说直接上代码，控制吸顶的属性.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
@Entry
@Component
struct Index {
@State list: number[] = []
private indexNo: number = 0
aboutToAppear() {//添加测试数据
for (let i = 0; i < 15; i++) {
this.list.push(i)
}
}
@Styles
listStyle() {
.backgroundColor(Color.White)
.height(72)
.width("100%")
.borderRadius(12)
}
@Builder
TabBuilder(title: string,index:number) {
Column() {
Text(title)
.fontSize(20)
.fontColor(Color.White)
}
.padding({ top: 10, bottom: 10 })
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.Pink)
.height(56)
.width('100%')
}
@Builder
tabBuilder() {
Tabs() {
ForEach(this.list, (item: number,Index:number) => {
TabContent() {
List({ space: 10 }) {
ForEach(this.list, (subItem: number,index:number) => {
ListItem() {
Text("item" + subItem).fontSize(16)
}.listStyle()
}, (subItem: string) => subItem)
}.width("100%")
.height('100%')
.edgeEffect(EdgeEffect.None)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}.tabBar(this.TabBuilder("Tab " + item, Index))
}, (item: number) => item.toString())
}
}
build() {
Scroll() {
Column() {
Text("头部滚动区域")
.width("100%")
.height("30%")
.fontSize(20)
.fontColor(Color.White)
.backgroundColor('#0080DC')
.textAlign(TextAlign.Center)
Tabs() {
TabContent() {
//滑动布局
this.tabBuilder()
}
.tabBar() //吸顶布局
}
.barHeight(0)
.vertical(false)
.height("100%")
}.width("100%")
}
.edgeEffect(EdgeEffect.None)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
}
