HarmonyOS 鸿蒙Next 关于 Scroll 组件疑问
HarmonyOS 鸿蒙Next 关于 Scroll 组件疑问
更多关于HarmonyOS 鸿蒙Next 关于 Scroll 组件疑问的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
好的,感谢。我去看下
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中扮演着重要的角色,它允许用户在有限的显示区域内查看大量内容。其工作原理基于用户滑动操作,通过监听滑动手势来改变内容的显示位置。
-
滚动方向:Scroll组件支持水平和垂直两种滚动方向,开发者可以在组件属性中设置。水平滚动适用于图片画廊、横向列表等场景;垂直滚动则常用于长文本、长列表等。
-
内容加载:当内容超出显示区域时,Scroll组件会自动显示滚动条,用户拖动滚动条可查看隐藏内容。若内容动态加载,需确保在滚动到边缘时触发加载逻辑。
-
弹性效果:Scroll组件支持弹性滚动效果,即用户快速拖动后释放,内容会带有惯性继续滚动一段距离再停下,提升用户体验。
-
事件处理:开发者可通过监听滚动事件(如开始滚动、滚动中、滚动结束)来实现自定义逻辑,如加载更多内容、更新界面状态等。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。