HarmonyOS 鸿蒙Next scrollToIndex 无动画效果

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

HarmonyOS 鸿蒙Next scrollToIndex 无动画效果 我要做一个消息列表,每当收到新消息时列表自动滚动到最底部,我无论调 scrollToIndex 还是 scrollEdge 滚动都没有动画效果。

4 回复
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 鸿蒙Next scrollToIndex 无动画效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: ScrollToIndexOptions);

第二个参数,smooth写true .也没动画吗?

是的 直接就跳过去了,

针对HarmonyOS(鸿蒙)中scrollToIndex无动画效果的问题,这通常是因为scrollToIndex方法默认是瞬间跳转到指定位置,而不包含平滑滚动或动画效果。在鸿蒙开发中,若要实现带有动画效果的滚动,可以考虑以下几种方式:

  1. 自定义动画:通过监听滚动事件或使用动画框架(如ArkUI中的动画组件),手动控制滚动视图的位置变化,模拟出平滑滚动的效果。

  2. 使用第三方库:检查是否有适用于鸿蒙的第三方UI库提供了带动画效果的滚动组件,这些库可能已经封装好了所需的动画逻辑。

  3. 修改滚动视图组件:如果可能,尝试修改或扩展现有的滚动视图组件,添加动画逻辑。这通常需要对组件的源码有一定了解。

  4. 查阅官方文档:虽然直接询问或搜索特定方法可能未得到动画相关的直接信息,但鸿蒙的官方文档或示例代码中可能有关于动画和滚动的高级用法或技巧。

请注意,由于鸿蒙系统相对较新,其API和组件可能仍在不断演进中,因此具体实现方式可能会随着系统版本的更新而变化。

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

回到顶部