可参考示例如下:@Entry @Component struct Page2 { @State messageArr: string[] = ['1', '2', '3', '4', '5', '6', '7'] scroller: Scroller = new Scroller() @State currentIndex: number = 1 build() { Column() { List({ initialIndex: 1, scroller: this.scroller }) { ListItem() { Column() { Text('second floor') Button('to index 1').onClick(() => { this.scroller.scrollToIndex(1, true, ScrollAlign.CENTER) }) } } .height('100%') .width('100%') .backgroundColor(Color.Grey) ListItem() { Column() { Row() { Text('消息') } .height(100) .width('100%') .backgroundColor(Color.Pink) List({}) { ForEach(this.messageArr, (item: string) => { ListItem() { Row() { Text(`message ${item}`) } .width('100%') .height('200vp') } }) } .divider({ strokeWidth: 2 }) .backgroundColor('#eee') .nestedScroll({ scrollBackward: NestedScrollMode.SELF_FIRST, scrollForward: NestedScrollMode.PARENT_FIRST, }) .padding({ bottom: 100 }) .edgeEffect(EdgeEffect.None) } } .width('100%') .height('100%') } .friction(2) .edgeEffect(EdgeEffect.None) .scrollSnapAlign(ScrollSnapAlign.CENTER) .onScrollFrameBegin((offset, state) => { if (state === ScrollState.Fling) { return { offsetRemain: 0 } } return { offsetRemain: offset } }) .onScrollIndex((start, end, center) => { this.currentIndex = center }) .onTouch((event: TouchEvent) => { let touchObject: TouchObject = event.touches[0] if (touchObject.type === TouchType.Up) { this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.CENTER) } }) } .height('100%') .width('100%') } }更复杂示例效果可参考:https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/secondfloorloadanimation
可参考示例如下:
更复杂示例效果可参考:https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/secondfloorloadanimation