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

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

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
相关问题
瀑布场景的推荐实现方案
715浏览 • 1回复 待解决
如何实现Fraction加载功能?
6159浏览 • 1回复 待解决
数组嵌套数组场景的加载实现
259浏览 • 1回复 待解决
使用LazyForEach加载列表相关问题
368浏览 • 1回复 待解决
grid组件及数据加载
453浏览 • 1回复 待解决
Tabs组件加载的问题
876浏览 • 1回复 待解决
LazyForEach加载的原理是什么
898浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
367浏览 • 1回复 待解决
如何直接加载二进制的图片?
1371浏览 • 1回复 待解决
使用http模块实现数据请求
375浏览 • 1回复 待解决
实现文件解压缩和数据解压缩
458浏览 • 1回复 待解决
是否支持模块的动态加载?如何实现
987浏览 • 1回复 待解决
Web组件中的预加载,如何实现
466浏览 • 1回复 待解决
动态布局下加载loading效果实现
280浏览 • 1回复 待解决