廢話不多說直接上代碼，控制吸頂?shù)膶傩?nestedScroll({
? scrollForward: NestedScrollMode.PARENT_FIRST,
? scrollBackward: NestedScrollMode.SELF_FIRST
})
@Entry
@Component
struct Index {
? @State list: number[] = []
? private indexNo: number =? 0
? aboutToAppear() {//添加測試數(shù)據(jù)
? ? 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("頭部滾動區(qū)域")
? ? ? ? ? .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%')
? }
}
