HarmonyOS鸿蒙Next中List列表加载完成默认滚动到底部，然后滚动到指定位置

HarmonyOS鸿蒙Next中List列表加载完成默认滚动到底部，然后滚动到指定位置 我这边使用list 加载一个数据，比如首次加载20条数据，加载完成自动滚动列表底部，可往上滚动加载，滚定指定位加载数据

3 回复

参考demo实现，滚定指定位可以用scrollToIndex实现

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['90', '91', '92', '93', '94','95','96','97','98','99','100']
  private scrollerForList: Scroller = new Scroller()
  count: number = 89

  build() {
    Column() {
      Refresh({ refreshing: this.isRefreshing, offset: 0}) {
        List({ initialIndex: this.arr.length - 1, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('100%')
        .height('100%')
        .divider({strokeWidth: 1,color: Color.Yellow,startMargin: 10,endMargin: 10})
        .scrollBar(BarState.Off)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        this.arr.unshift(this.count-- +'')
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onOffsetChange((value: number) => {
        console.info('Refresh onOffsetChange offset:' + value)
      })
      .onRefreshing(() => {
        this.scrollerForList.scrollToIndex(4, false)
        setTimeout(() => {
          this.isRefreshing = false
        }, 500)
        console.log('onRefreshing test')
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中List列表加载完成默认滚动到底部，然后滚动到指定位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，List列表加载完成后默认滚动到底部，然后滚动到指定位置的实现可以通过List组件的scrollToIndex方法来实现。首先，确保List中的数据已经加载完毕，然后通过scrollToIndex方法将列表滚动到底部，接着再次调用scrollToIndex方法将列表滚动到指定位置。

例如，假设你有一个List组件，数据源为data，你可以在数据加载完成后执行以下操作：

// 假设List组件的ref为listRef
listRef.scrollToIndex({ index: data.length - 1, animated: false }).then(() => {
    listRef.scrollToIndex({ index: targetIndex, animated: true });
});

其中，data.length - 1表示列表的最后一个元素，targetIndex是你希望滚动到的指定位置。通过animated: false确保第一次滚动到底部时不显示动画，animated: true则在滚动到指定位置时显示动画。

这种方法可以确保列表先滚动到底部，然后再滚动到指定位置。

在HarmonyOS鸿蒙Next中，若希望List列表加载完成后默认滚动到底部，然后滚动到指定位置，可以通过List组件的scrollToIndex方法实现。首先，确保列表数据已加载完成，然后调用scrollToIndex方法，先滚动到最后一个元素的位置，再滚动到指定位置。例如：

list.scrollToIndex({ index: listData.length - 1, smooth: true }).then(() => {
    list.scrollToIndex({ index: targetIndex, smooth: true });
});

其中，listData是列表数据源，targetIndex是目标位置索引。smooth: true确保滚动过程平滑过渡。

回到顶部