界面内容瀑布流懒加载实现

import Prompt from '@system.prompt' 
import { WaterFlowDataSource } from './WaterFlowDataSource' 
​ 
@Entry 
@Component 
struct Index { 
 @State minSize: number = 120 
 @State maxSize: number = 300 
 @State fontSize: number = 24 
 @State colors: string[] = ['#000000', '#ffffff', '#00ffff', '#ff00ff', '#ffff00', '#abd212'] 
 scroller: Scroller = new Scroller() 
 datasource: WaterFlowDataSource = new WaterFlowDataSource() 
 private itemHeightArray: number[] = [] 
​ 
 // 计算flow item的高 
 // 取一个maxSize和maxSize之间的值 
 getSize() { 
   let ret = Math.floor(Math.random() * this.maxSize) 
   return (ret > this.minSize ? ret : this.minSize) 
} 
​ 
 // 保存flow item宽/高 
 getItemSizeArray() { 
   for (let i = 0; i < 100; i++) { 
     // 新增元素高度 
     this.itemHeightArray.push(this.getSize()) 
  } 
} 
​ 
 // 创建自定义组件的新实例后，在执行其build()函数之前执行 
 aboutToAppear() { 
   this.getItemSizeArray() 
} 
​ 
 build() { 
   Column() { 
     WaterFlow() { 
       LazyForEach(this.datasource, (item: number) => { 
         FlowItem() { 
           Column() { 
             Image($r('app.media.a')) 
              .objectFit(ImageFit.Fill) 
              .width('100%') 
              .height('100%') 
              .borderRadius(15) 
              .layoutWeight(1) 
             Text('主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主题内容主') 
              .width('100%') 
              .maxLines(1) 
              .textOverflow({ overflow: TextOverflow.Ellipsis }) 
              .padding({ 
                 top: 10, 
                 bottom: 10 
              }) 
          } 
        } 
        .onAppear(() => { 
           // 即将触底时提前增加数据 
           Prompt.showToast({ 
             message: String(item) 
          }) 
           // 当还有20个未出现在可视区且总加载数不到100时新增数据 
           if (item + 20 == this.datasource.totalCount() && this.datasource.totalCount() < 100) { 
             for (let i = 0; i < 50; i++) { 
               this.datasource.AddLastItem() 
            } 
          } 
        }) 
        .width('100%') 
         // 循环设置图片高度 
        .height(this.itemHeightArray[item % 6]) 
      }, (item: string) => item) 
    } 
    .padding({ 
       left: 10, 
       right: 10 
    }) 
     // 设置列数 
    .columnsTemplate("1fr 1fr") 
    .columnsGap(5) 
    .rowsGap(5) 
    .backgroundColor(Color.White) 
    .width('100%') 
    .height('100%') 
     LoadingProgress() 
      .color(Color.Blue) 
  } 
} 
}
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.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.