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

页面中视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

HarmonyOS
2024-05-26 12:10:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
chmqn

使用的核心API

WaterFlow

LazyForEach

核心代码解释

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) 
  } 
} 
}

适配的版本信息

IDE:DevEco Studio 4.0.1.601

SDK:HarmoneyOS 4.0.0.40

分享
微博
QQ
微信
回复
2024-05-27 16:00:30
相关问题
瀑布场景的推荐实现方案
1919浏览 • 1回复 待解决
HarmonyOS List瀑布实现方案
127浏览 • 1回复 待解决
如何实现Fraction加载功能?
7445浏览 • 1回复 待解决
HarmonyOS 单列和瀑布的最佳实践
246浏览 • 1回复 待解决
数组嵌套数组场景的加载实现
636浏览 • 1回复 待解决
在鸿蒙中如何实现页面的加载?
160浏览 • 0回复 待解决
Tabs组件加载的问题
2306浏览 • 1回复 待解决
grid组件及数据加载
983浏览 • 1回复 待解决
HarmonyOS 列表展示list加载问题
633浏览 • 1回复 待解决
HarmonyOS 加载的数据删除问题
477浏览 • 1回复 待解决
LazyForEach加载的原理是什么
2177浏览 • 1回复 待解决