HarmonyOS ArkTS LazyForEach 数据懒加载

HarmonyOS ArkTS LazyForEach用于数据懒加载

LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。

HarmonyOS 仿小米App实战教程：https://www.itying.com/goods-1193.html

HarmonyOS ArkTS中使用LazyForEach第一步定义 IDataSource

ProductModel.ets

export class ProductModel {
  _id?: string
  title?: string
  cid?: string
  price?: number
  pic?: string
  sub_title?: string
  s_pic?: string
}

WaterFlowDataSource.ets

import { ProductModel } from './ProductModel';

export class  WaterFlowDataSource implements IDataSource{
  //数据
  private dataArray: ProductModel[] = []
  //监听器
  private listeners: DataChangeListener[] = []

  //获取总数量的方法
  totalCount(): number {
    return this.dataArray.length
  }
  //固定的获取数据的方法
  getData(index: number) {
    return this.dataArray[index]
  }
  //自定义增加数据的方法
  addData(item:ProductModel){
    this.dataArray.push(item)
    this.notifyDataAdd(this.dataArray.length-1)
  }
  // 自定义通知控制器数据增加
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }
}

HarmonyOS ArkTS中使用LazyForEach第二步给datasource增加数据

datasource: WaterFlowDataSource = new WaterFlowDataSource()

请求接口后给datasource增加数据

HttpGet(Config.SERVER + "api/plist?is_best=1").then((response) => {
      if (response.success) {
        let data = JSON.stringify(response.result)
        let bestProductList: ProductModel[] = JSON.parse(data)
        for (let i = 0; i < bestProductList.length; i++) {
          const element = bestProductList[i]
          //给WaterFlowDataSource增加数据
          this.datasource.addData(element)
        }
      } else {
        promptAction.showToast({
          message: response.message,
          duration: 5000
        })
      }
    }).catch((e) => {
      promptAction.showToast({
        message: JSON.stringify(e),
        duration: 5000
      })
    })

HarmonyOS ArkTS中使用LazyForEach第三步循环遍历数据

LazyForEach(this.datasource,(item:ProductModel)=>{
        
            Column() {
              Row(){
                Image(Config.SERVER+ReplaceUri(item.s_pic)).objectFit(ImageFit.Cover)
              }.width("100%")
              .height("532lpx")
              Text(item.title)
              Text(item.sub_title)
              Text(item.price+"")
            }
        })