HarmonyOS 如何实现列表快速滑动时不加载，停下来时才加载？

Question

如题：HarmonyOS 如何实现列表快速滑动时不加载，停下来时才加载？

Answer 1

请参考以下demo：

使用isScroll来控制是否加载PDF那个组件（这里用Text代替），不渲染时，最好有个占位图（Image）；

onScrollStart、onScrollStop用来改变isScroll状态；

@Entry
@Component
export struct MyList {

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

  build() {
    Column() {

      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            if (!this.isScroll) {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            } else {
              Image($r("app.media.app_icon"))
                .width("100%")
                .height(100)
            }
          }
        }, (item: string) => item)
      }
      .onScrollStart(() => {
        this.isScroll = true
      })
      .onScrollStop(() => {
        this.isScroll = false
      })
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })

  }
}