鸿蒙基础ScrollBar

scroller :控制器

direction : 方向

state :方式  on  off  auto

 ScrollBar({
        scroller : this.scrollController,
        state : BarState.On,
        direction:ScrollBarDirection.Horizontal
      }){
        Text('滚动条')
          .height(24)
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
      }.width(300).height(24)
      .backgroundColor(Color.Pink)

      ScrollBar({
        scroller : this.scrollController,
        state : BarState.On,
        direction:ScrollBarDirection.Vertical
      }){
        Text('滚动条')
          .width(24)
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
      }.width(24).height(300)
      .backgroundColor(Color.Pink)

### HarmonyOS 中的懒加载概念及其使用原因 #### 懒加载的概念 懒加载是一种延迟加载的技术,其核心思想是仅在需要时才加载数据或资源。这种技术能够有效减少初始加载阶段的数据量和计算复杂度,从而显著改善应用启动时间和运行效率[^2]。 在 HarmonyOS 的 ArkTS 编程模型中,`LazyForEach` 是一种专门用于实现懒加载功能的 API。它通过按需加载的方式,在用户访问特定部分的内容时动态生成对应的组件或数据项,而非一次性将整个数据集全部加载到内存中[^1]。 --- #### LazyForEach 工作原理 `LazyForEach` 的工作流程如下: - 数据源被分割成若干个小片段,只有当前可见区域内的数据会被优先加载。 - 随着用户的滚动操作,不可见区域的数据不会立即加载,而是等到它们进入可视范围后再触发加载逻辑。 - 加载完成后,这些新加入视口的数据会替换掉已经移出视野的部分,释放不再使用的资源以节省内存占用。 这种方式特别适合处理诸如长列表、网格布局以及瀑布流展示等场景下的大数据集合显示问题[^3]。 --- #### 使用懒加载的原因 ##### 提升性能表现 对于包含大量数据项的应用界面来说,如果尝试一次性渲染所有的项目,则可能导致严重的卡顿现象甚至崩溃风险。而采用懒加载策略后,由于只需要关注当前屏幕上呈现的那一部分内容,因此极大地降低了 CPU 和 GPU 的负担,同时也减少了不必要的 DOM 操作次数[^1]。 ##### 减少带宽消耗 在网络环境中获取远程服务端返回的大规模 JSON 文件或其他形式媒体资料的情况下,运用懒加载手段还可以帮助节约宝贵的网络流量资源。因为客户端不必一开始就下载完整的文档树结构,而是随着浏览进度逐步索取所需片断即可满足即时查看需求。 ##### 增强用户体验 从最终使用者角度来看,得益于更快的首屏展现速度加上平滑过渡效果的支持,整体交互过程变得更加顺畅自然。此外,当某些特殊类型的多媒体素材(比如高清图片视频链接地址)也参与到这一机制当中时,还能进一步缩短预览等待周期,让顾客感受到更加愉悦的服务品质[^3]。 --- ### 实际案例演示 下面给出一段简单的代码示例,说明如何在 HarmonyOS 应用程序里利用 `LazyForEach` 来构建一个具备懒加载特性的垂直方向滚动列表: ```typescript @Entry @Component struct LazyLoadExample { @State items: Array<string> = new Array(100).fill(null).map((_, i) => `Item ${i}`) build() { List({ space: 10, // 列表间距设置为10px refreshEffect: RefreshEffect.None // 关闭下拉刷新动画特效 }) { LazyForEach(this.items, (item, index) => { // 使用LazyForEach代替传统循环方法 return ListItem({ key: `${index}` }) { // 创建每一行记录单元格 Text(item).fontSize(24).fontColor(Color.Black) .backgroundColor(index % 2 === 0 ? Color.LightGray : Color.White) } }) } .height('100%') // 设置列表高度占满父级容器 .width('100%') .scrollbar(false) // 可选参数隐藏默认滚动条样式 } } ``` 此段脚本定义了一个由一百个字符串组成的数组作为基础数据源,并将其传递给 `LazyForEach` 方法内部进行逐一遍历映射转换。每当有新的元素即将出现在屏幕范围内时,系统便会自动调用匿名回调函数负责实例化对应的实际 UI 控件对象[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值