在鸿蒙ArkUI（eTS）开发中，如何实现列表回到顶部的效果？

解答

让list组件绑定Scroller事件，调用scroller.scrollToIndex(0)方法。代码如下：

@Entry

@Component

struct Index {

  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

  scroller: Scroller = new Scroller()

  build() {

    Stack({ alignContent: Alignment.TopStart }) {

      List({ scroller: this.scroller }) {

        ForEach(this.arr, (item) => {

          ListItem() {

            Text('' + item)

              .width('100%')

              .height(100)

              .fontSize(16)

              .textAlign(TextAlign.Center)

              .borderRadius(10)

              .backgroundColor(0xFFFFFF)

          }

        }, item => item)

      }

      .divider({strokeWidth:1,color:0xcccccc})

      .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果

      .width('100%')

      Button('回到顶部')

        .onClick(() => {

          this.scroller.scrollToIndex(0)

        }).markAnchor({ x: '100%', y: '100%'})

          .position({ x: '100%', y: '100%' }).margin(10)

    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })

  }

}

相关参考：在鸿蒙HarmonyOS开发下如何去除顶部Bar。