HarmonyOS鸿蒙Next中List组件添加数据时如何保持列表不自动滚动

HarmonyOS鸿蒙Next中List组件添加数据时如何保持列表不自动滚动

List组件使用LazyForEach 在给dataSource 从数组头部添加数据时,

列表会自动滚动

(实现聊天消息列表场景,需要从列表头部添加数据)

3 回复

看下如下demo能否实现

@ObservedV2
class ArrayHolder {
  @Trace arr: Array<number> = [];

  // constructor,用于初始化数组个数
  constructor(count: number) {
    for (let i = 0; i < count; i++) {
      this.arr.push(i);
    }
  }
}

@Entry
@ComponentV2
struct RepeatScrollPage {
  @Local arrayHolder: ArrayHolder = new ArrayHolder(100);
  @Local totalCount: number = this.arrayHolder.arr.length;
  scroller: Scroller = new Scroller();

  // fix
  private start: number = 1;
  private end: number = 1;
  // end

  build() {
    Column({ space: 5 }) {
      List({ space: 20, initialIndex: 19, scroller: this.scroller }) {
        Repeat(this.arrayHolder.arr)
          .virtualScroll({ totalCount: this.totalCount })
          .templateId((item, index) => {
            return 'number';
          })
          .template('number', (r) => {
            ListItem() {
              Text(r.index! + ":" + r.item + "Reuse");
            }
          })
          .each((r) => {
            ListItem() {
              Text(r.index! + ":" + r.item + "eachMessage");
            }
          })
      }
      // fix
      .onScrollIndex((start, end) => {
        this.start = start;
        this.end = end;
      })
      // end
      .height('30%')

      Button(`insert totalCount ${this.totalCount}`)
        .height(60)
        .onClick(() => {
          // 插入元素,元素位置为屏幕显示的前一个元素
          this.arrayHolder.arr.splice(18, 0, this.totalCount);
          // fix
          let rect = this.scroller.getItemRect(this.start); // 获取子组件的大小位置
          this.scroller.scrollToIndex(this.start + 1); // 滑动到指定index
          this.scroller.scrollBy(0, -rect.y); // 滑动指定距离
          // end
          this.totalCount = this.arrayHolder.arr.length;
        })
    }
    .width('100%')
    .margin({ top: 5 })
  }
}

通过 onScrollIndex 记录当前索引位置实现的,可以参考如下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#scrolltoindex

更多关于HarmonyOS鸿蒙Next中List组件添加数据时如何保持列表不自动滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,使用List组件添加数据时,若希望列表不自动滚动,可以通过设置List组件的scrollTo方法来实现。具体做法是在添加数据后,调用scrollTo方法将列表的滚动位置保持在当前的位置。例如,可以在添加数据前获取当前的滚动位置,添加数据后再将滚动位置设置回之前的位置。这样可以避免列表在数据更新时自动滚动到顶部或底部。代码示例如下:

let currentScrollPosition = listComponent.getScrollPosition();
listComponent.addData(newData);
listComponent.scrollTo(currentScrollPosition);

在HarmonyOS鸿蒙Next中,若要向List组件添加数据时保持列表不自动滚动,可以通过以下方式实现:

  1. 使用ListController: 在添加数据前,获取当前列表的滚动位置,数据添加后再恢复滚动位置。
  2. 禁用自动滚动: 在添加数据时,通过设置List组件的scrollTo方法,确保列表不会自动滚动到新添加的项。
  3. 批量操作: 尽量在一次性操作中添加多条数据,减少频繁触发滚动的可能性。

通过这些方法,可以有效控制列表的滚动行为,确保用户体验流畅。

回到顶部