如何实现列表的上拉加载功能？

专题：ArkUI（eTS）常见UI效果汇总（更新中）

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

收起
自动换行
深色代码主题
复制

import prompt from '@system.prompt' @Entry@Componentstruct 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);  }}