HarmonyOS 鸿蒙Next 关于 Scroll 组件疑问

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 关于 Scroll 组件疑问

在使用 Scroll 组件时,如何实现像微信消息列表滚动,最新的消息在最下面,之前的消息在往上排列。当前消息不足一页时,整体又是从上到下排列。请教中…

8 回复

好的,感谢。我去看下

import { hilog } from '@kit.PerformanceAnalysisKit'
import { LengthMetrics } from '@ohos.arkui.node'

@Entry
@ComponentV2
struct ChatIndex {
  @Local list: number[] = []
  listScroller: ListScroller = new ListScroller()
  firstIndex: number = 0

  aboutToAppear(): void {
    for (let i = 0; i < 10; i++) {
      this.list.push(i)
    }
  }

  build() {
    Column() {
      Text("对话")
      Divider().width('100%').backgroundColor(Color.Gray)
      List({ scroller: this.listScroller, initialIndex: this.list.length - 1 }) {
        Repeat<number>(this.list)
          .each((ri: RepeatItem<number>) => {
            Text(ri.item.toString())
              .height('20%')
          })
          .key((item: number, index: number) => item.toString())
          .virtualScroll()
      }
      .divider({
        color: Color.Blue,
        strokeWidth: '5vp'
      })
      .layoutWeight(1)
      .onScrollVisibleContentChange((start) => {
        hilog.debug(0x000000, 'rainrain', 'start == ' + start.index)
        this.firstIndex = start.index
      })

      Divider().width('100%').backgroundColor(Color.Gray)
      Row() {
        Button('在头部新增,但不影响影响List 展示')
          .onClick(() => {
            hilog.debug(0x000000, 'rainrain', 'start == ' + this.listScroller.getItemRect(this.firstIndex).y)
            let offset: number = this.listScroller.getItemRect(this.firstIndex).y
            let top = 0
            if (this.list.length != 0) {
              top = this.list[0]
            }
            let addCount = 4
            for (let index = 0; index < addCount; index++) {
              top--
              this.list.unshift(top)
            }
            this.listScroller.scrollToIndex(this.firstIndex + addCount, false, ScrollAlign.START, {
              extraOffset: LengthMetrics.vp(-offset)
            })
          })
        Blank()
        Button('新增消息').onClick(() => {
          this.list.push(this.list.length)
          if (this.listScroller.isAtEnd()) {
            this.listScroller.scrollToIndex(this.list.length - 1, true, ScrollAlign.END)
          }

        })
      }
    }
  }
}

没找到合适的。自己随便写了一个。等大佬来个更好的

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17

数据反向排序下,UI 效果上是一致的

为啥要反向?从使用频率来说,新消息明显比查看老消息的次数更多。从内存来说,明显list加在尾部比加头部效率更高

针对您提出的HarmonyOS 鸿蒙Next关于Scroll组件的疑问,以下提供直接相关的解答:

Scroll组件在HarmonyOS中扮演着重要的角色,它允许用户在有限的显示区域内查看大量内容。其工作原理基于用户滑动操作,通过监听滑动手势来改变内容的显示位置。

  1. 滚动方向:Scroll组件支持水平和垂直两种滚动方向,开发者可以在组件属性中设置。水平滚动适用于图片画廊、横向列表等场景;垂直滚动则常用于长文本、长列表等。

  2. 内容加载:当内容超出显示区域时,Scroll组件会自动显示滚动条,用户拖动滚动条可查看隐藏内容。若内容动态加载,需确保在滚动到边缘时触发加载逻辑。

  3. 弹性效果:Scroll组件支持弹性滚动效果,即用户快速拖动后释放,内容会带有惯性继续滚动一段距离再停下,提升用户体验。

  4. 事件处理:开发者可通过监听滚动事件(如开始滚动、滚动中、滚动结束)来实现自定义逻辑,如加载更多内容、更新界面状态等。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部