在鸿蒙ArkUI（eTS）开发中，如何实现列表的上拉加载功能？

解答

主要通过onScrollIndex()方法判断List组件是否滑动到底部，然后通过是否正在加载、是否还有数据两个变量状态判断是否需要加载新的数据。代码如下：

import prompt from '@system.prompt'

@Entry

@Component

struct Index {

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

  @State isLoading:boolean=false;

  @State hasData:boolean=true;

  build() {

    Stack() {

      List() {

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

          ListItem() {

            Text('' + item)

              .width('100%')

              .height(100)

              .fontSize(16)

              .textAlign(TextAlign.Center)

              .borderRadius(10)

              .backgroundColor(0xFFFFFF)

          }.editable(true)

        }, item => item)

        if(!this.hasData){

          ListItem() {

            Text('没有更多数据了')

              .width('100%')

              .height(40)

              .fontSize(16)

              .textAlign(TextAlign.Center)

              .backgroundColor(0xCECECE)

          }

        }else {

          if (this.isLoading && this.hasData) {

            ListItem() {

              Text('正在加载数据')

                .width('100%')

                .height(40)

                .fontSize(16)

                .textAlign(TextAlign.Center)

                .backgroundColor(0xFFFFFF)

            }

          }

        }

      }

      .divider({ strokeWidth: 1, color: 0xcdcdcd}) // 每行之间的分界线

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

      .onScrollIndex((firstIndex: number, lastIndex: number) => {

        if(this.hasData&&!this.isLoading&&lastIndex>=this.arr.length-1){

          this.isLoading=true;

          this.loadMoreData();

        }

        console.info('first' + firstIndex+'    last' + lastIndex)

      })

      .width('100%')

    }.width('100%').height('100%').backgroundColor(0xDCDCDC)

  }

  loadMoreData(){

    prompt.showToast({

      message: "加载数据"

    });

    setTimeout(() => {

      this.isLoading = false

      this.arr.push(21, 22, 23, 24, 25, 26, 27, 28, 29, 30)

      this.hasData=false;

    }, 3000);

  }}

相关参考：鸿蒙开发怎样根据手机横竖屏判断加载不同布局。