中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
HarmonyOS 对于Scroll内有Tabs,Tabs内有List,list和外部的Scroll嵌套滚动有什么比较方便的办法实现呢?
微信扫码分享
@Entry @Component struct page240429110107050 { @State message: string = 'Hello World' @State arr: number[] = [] private touchDown: boolean = false; private listTouchDown: boolean = false; private scrolling: boolean = false; private scroller: Scroller = new Scroller() private listScroller: Scroller = new Scroller() @Styles listCard() { .backgroundColor(Color.White) .height(72) .width("100%") .borderRadius(12) } build() { Scroll(this.scroller) { Column() { Text("Scroll Area") .width("100%") .height("400") .backgroundColor('#0080DC') .textAlign(TextAlign.Center) Tabs({ barPosition: BarPosition.Start }) { TabContent() { List({ space: 10, scroller: this.listScroller }) { ForEach(this.arr, (item: number) => { ListItem() { Text("item" + item) .fontSize(16) }.listCard() }, (item: number) => item.toString()) }.width("100%") .edgeEffect(EdgeEffect.Spring) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .onTouch((event: TouchEvent) => { if (event.type == TouchType.Down) { this.listTouchDown = true; } else if (event.type == TouchType.Up) { this.listTouchDown = false; } }) }.tabBar("Tab1") TabContent() { }.tabBar("Tab2") } .vertical(false) .height("100%") }.width("100%") } .onTouch((event: TouchEvent) => { if (event.type == TouchType.Down) { this.touchDown = true; } else if (event.type == TouchType.Up) { this.touchDown = false; } }) .onScrollFrameBegin((offset: number, state: ScrollState) => { if (this.scrolling && offset > 0) { let yOffset: number = this.scroller.currentOffset().yOffset if (yOffset >= 400) { this.listScroller.scrollBy(0, offset) return { offsetRemain: 0 } } else if (yOffset + offset > 400) { this.listScroller.scrollBy(0, yOffset + offset - 400) return { offsetRemain: 400 - yOffset } } } return { offsetRemain: offset } }) .onScrollStart(() => { if (this.touchDown && !this.listTouchDown) { this.scrolling = true; } }) .onScrollStop(() => { this.scrolling = false; }) .edgeEffect(EdgeEffect.Spring) .backgroundColor('#DCDCDC') .scrollBar(BarState.Off) .width('100%') .height('100%') } aboutToAppear() { for (let i = 0; i < 30; i++) { this.arr.push(i) } } }