HarmonyOS foreach lazyforeach,列表该用哪种?

列表是分页查询,一页10条,适合用哪个?有推荐的demo吗?

HarmonyOS
2024-10-10 13:07:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

ForEach的itemGenerator函数可以包含if/else条件渲染逻辑。另外,也可以在if/else条件渲染语句中使用ForEach组件。在初始化渲染时,ForEach会加载数据源的所有数据,并为每个数据项创建对应的组件,然后将其挂载到渲染树上。如果数据源非常大或有特定的性能需求,建议使用LazyForEach组件。列表分页查询可以参考三方库:https://gitee.com/openharmony-sig/PullToRefresh

如果自己实现,可参考以下简单demo:

@Entry  
@Component  
struct ListItemGroupExample {  
  private list: MyDataSource2 = new MyDataSource2()  
  @Builder  
  itemHead(text: string) {  
    Text(text)  
      .fontSize(20)  
      .backgroundColor(0xAABBCC)  
      .width("100%")  
      .padding(10)  
  }  
  @Builder  
  itemFoot(num: number) {  
    Text('共' + num + "节课")  
      .fontSize(16)  
      .backgroundColor(0xAABBCC)  
      .width("100%")  
      .padding(5)  
  }  
  aboutToAppear() {  
    for (let date = 1; date < ~~(Math.random() * 30) + 3; date++) {  
      let dayData = new dateListItem(date + "")  
      for (let index = 1; index < ~~(Math.random() * 100) + 30; index++) {  
        dayData.orderList.pushData(`hello${index}`)  
      }  
      this.list.pushData(dayData)  
    }  
  }  
  build() {  
    Column() {  
      List({ space: 20 }) {  
        LazyForEach(this.list, (item: dateListItem, index) => {  
          ListItemGroup({ header: this.itemHead(item.date + ""), footer: this.itemFoot(item.orderList.totalCount()) }) {  
            LazyForEach(item.orderList, (order: string, index2) => {  
              ListItem() {  
                Text(order)  
                  .onAppear(() => {  
                    console.info("appear:" + order, index2 + "")  
                  })  
                  .width("100%")  
                  .height(60)  
                  .fontSize(20)  
                  .textAlign(TextAlign.Center)  
                  .backgroundColor(0xFFFFFF)  
              }  
            }, (item: string) => item)  
          }  
          .onAppear(() => {  
            console.info("appear:" + item, index + "")  
          })  
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线  
        })  
      }  
      .cachedCount(1)  
      .width('90%')  
      .sticky(StickyStyle.Header | StickyStyle.Footer)  
      .scrollBar(BarState.Off)  
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })  
  }  
}  
// Basic implementation of IDataSource to handle data listener  
class BasicDataSource implements IDataSource {  
  private listeners: DataChangeListener[] = [];  
  private originDataArray: string[] = [];  
  public totalCount(): number {  
    return 0;  
  }  
  public getData(index: number): string | dateListItem {  
    return this.originDataArray[index];  
  }  
  // 该方法为框架侧调用,为LazyForEach组件向其数据源处添加listener监听  
  registerDataChangeListener(listener: DataChangeListener): void {  
    if (this.listeners.indexOf(listener) < 0) {  
      console.info('add listener');  
      this.listeners.push(listener);  
    }  
  }  
  // 该方法为框架侧调用,为对应的LazyForEach组件在数据源处去除listener监听  
  unregisterDataChangeListener(listener: DataChangeListener): void {  
    const pos = this.listeners.indexOf(listener);  
    if (pos >= 0) {  
      console.info('remove listener');  
      this.listeners.splice(pos, 1);  
    }  
  }  
  // 通知LazyForEach组件需要重载所有子组件  
  notifyDataReload(): void {  
    this.listeners.forEach(listener => {  
      listener.onDataReloaded();  
    })  
  }  
  // 通知LazyForEach组件需要在index对应索引处添加子组件  
  notifyDataAdd(index: number): void {  
    this.listeners.forEach(listener => {  
      listener.onDataAdd(index);  
    })  
  }  
  // 通知LazyForEach组件在index对应索引处数据有变化,需要重建该子组件  
  notifyDataChange(index: number): void {  
    this.listeners.forEach(listener => {  
      listener.onDataChange(index);  
    })  
  }  
  // 通知LazyForEach组件需要在index对应索引处删除该子组件  
  notifyDataDelete(index: number): void {  
    this.listeners.forEach(listener => {  
      listener.onDataDelete(index);  
    })  
  }  
}  
// 内层数据  
class MyDataSource1 extends BasicDataSource {  
  private dataArray: string[] = [];  
  
  public totalCount(): number {  
    return this.dataArray.length;  
  }  
  public getData(index: number): string {  
    return this.dataArray[index];  
  }  
  public addData(index: number, data: string): void {  
    this.dataArray.splice(index, 0, data);  
    this.notifyDataAdd(index);  
  }  
  public pushData(data: string): void {  
    this.dataArray.push(data);  
    this.notifyDataAdd(this.dataArray.length - 1);  
  }  
}  
// 外层数据  
class MyDataSource2 extends BasicDataSource {  
  private dataArray: dateListItem[] = [];  
  
  public totalCount(): number {  
    return this.dataArray.length;  
  }  
  public getData(index: number): dateListItem {  
    return this.dataArray[index];  
  }  
  public addData(index: number, data: dateListItem): void {  
    this.dataArray.splice(index, 0, data);  
    this.notifyDataAdd(index);  
  }  
  public pushData(data: dateListItem): void {  
    this.dataArray.push(data);  
    this.notifyDataAdd(this.dataArray.length - 1);  
  }  
}  
class dateListItem {  
  date: string  
  orderList: MyDataSource1  
  constructor(date: string) {  
    this.date = date  
    this.orderList = new MyDataSource1()  
  }  
}
分享
微博
QQ
微信
回复
2024-10-10 18:00:07
相关问题
ForEach/LazyForEach键值生成规则是怎样的
1121浏览 • 1回复 待解决
使用LazyForEach懒加载列表相关问题
792浏览 • 1回复 待解决
HarmonyOS LazyForEach
249浏览 • 1回复 待解决
HarmonyOS ForEach局部刷新
268浏览 • 1回复 待解决
HarmonyOS lazyForeach嵌套视图问题
156浏览 • 1回复 待解决
HarmonyOS swiper + LazyForEach使用问题
206浏览 • 1回复 待解决
HarmonyOS Swiper+ForEach使用问题
212浏览 • 1回复 待解决
HarmonyOS APP开发到底用哪种语言?
2266浏览 • 1回复 待解决
关于import应该使用哪种方式
1845浏览 • 1回复 待解决