Sections 多列混排 原创

 WaterFlow({ scroller: this.scroller, sections: this.sections }) {
        LazyForEach(this.dataSource, (item: Record<string, Object>) => {
          FlowItem() {
            ReusableFlowItem({ item: item, imgPath: this.imgPath })
          }
        }, (item: string) => item)
      }
1.
2.
3.
4.
5.
6.
7.

@Reusable
@Component
struct ReusableFlowItem {
  @State item: Record<string, Object> = {};
  public imgPath: string = ''

  aboutToReuse(params: Record<string, Object>) {
    this.item = params.item as Record<string, Object>;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

import { SectionsComponent } from 'sectionslibrary';
1.

    Column() {
      SectionsComponent({imgPath: this.imgPath, dataArray: this.dataArray})
    }
1.
2.
3.

export class WaterFlowDataSource implements IDataSource {
  private dataArray: Record<string, Object>[] = []
  private listeners: DataChangeListener[] = []
  /**
   * 构造函数
   * @param dataArray
   */
  constructor(dataArray: Record<string, Object>[]) {
    this.dataArray = dataArray
  }
  /**
   * 获得数据总数
   * @returns
   */
  totalCount(): number {
    return this.dataArray.length;
  }
  /**
   * 获取索引值index对应的数据
   * @param index
   * @returns
   */
  getData(index: number): Record<string, Object> {
    return this.dataArray[index];
  }
  /**
   * 注册数据改变的监听器
   * @param listener
   */
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }
  /**
   * 注销数据改变的监听器
   * @param listener
   */
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }
  /**
   * 追加数据
   */
  public addLastItem(): void {
    // start：指定修改开始的位置（索引）。
    // deleteCount（可选）：一个整数，表示要移除的数组元素的个数。如果省略，则移除从start位置到数组末尾的所有元素。
    // ...items（可选）：要添加进数组的新元素，从start位置开始。如果没有指定，则只删除元素。
    // 在索引数组长度的位置插入当前数组长度，不删除任何元素。
    let obj: Record<string, Object> = { 'key': this.dataArray.length, 'value': `${(this.dataArray.length) % 4}.png` }
    this.dataArray.splice(this.dataArray.length, 0, obj );
    this.notifyDataAdd(this.dataArray.length - 1);
  }
  // 通知数据有添加
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.