HarmonyOS List组件滑动到顶部添加新的数据后,如何让List组件的滚动位置停留在添加数据之前的位置,而不是滚动到页面最顶部

假设聊天数据总供有120条,刚进入页面时加载了第100-120条,并设置了初始显示位置是20,即第120条数据的位置;用户滑动页面到顶部即第100条数据位置时,触发加载第第80-100条数据的逻辑,当把第80-100条数据添加到List上时,此时List组件会滚动到第80条数据显示的位置即页面最顶部,我的预期是List应该停留在第100条数据显示的位置,请问如何实现这个预期(页面顶部添加数据后,让页面的滚动位置不要变)

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

使用scrollToIndex,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5#scrolltoindex

参考以下Demo:

import { DDataSource } from './DDataSource';
import { IndexViewModel } from './IndexViewModel';
import { ArrayList } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  viewModel?: IndexViewModel = new IndexViewModel()
  private scroller: Scroller = new Scroller();
  @State listArr: DDataSource<string> = this.viewModel!!.msgListDataSource
  initNumber: number = 10
  @State initialIndex:number = 20

  startIndex: number = 20


  aboutToAppear(): void {
    this.listArr.addData(0, this.getAddData())
    // this.listArr.loadMoreData(this.getAddData())
  }

  getAddData(): ArrayList<string> {
    let arr = new ArrayList<string>()
    let tmpNumber = this.initNumber-20
    for (let i = tmpNumber; i <= this.initNumber; i++) {
      arr.add(`当前数据:${i}`)
    }
    this.initNumber = tmpNumber
    return arr
  }

  build() {
    Column() {
      List({
        scroller: this.scroller,
        space: "5vp",
        initialIndex:this.initialIndex
      }) {
        LazyForEach(this.listArr, (item: string, index: number) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height("50vp")
              .textAlign(TextAlign.Center)
              .fontSize("15fp")
              .fontColor("#333333")
          }
        }, (item: string, index: number) => {
          return item
        })
      }.cachedCount(5)
      .backgroundColor("#f5f5f5")
      .layoutWeight(1)
      .width('100%')

      .onScrollIndex((start: number) => {
        this.startIndex = start;
        console.log('this.startIndex', this.startIndex)
      })

      Text("添加数据")
        .width("100%")
        .height("80vp")
        .backgroundColor("#eeeeee")
        .fontSize("18fp")
        .onClick(() => {
          // this.listArr.addData(0, this.getAddData())
          console.log('数组',JSON.stringify(this.listArr))
          let indexOffset = this.scroller.getItemRect(this.startIndex).y;
          this.listArr.addData(0, this.getAddData())
          this.scroller.scrollToIndex(this.startIndex + 21);
          this.scroller.scrollBy(0, -indexOffset);

        })
    }.width("100%")
    .height("100%")

  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
Web组件怎么知道滚动到顶部
878浏览 • 1回复 待解决
HarmonyOS List列表滚动到指定位置
31浏览 • 1回复 待解决
list组件无法滚动到底部
1310浏览 • 1回复 待解决
HarmonyOS List组件滚动监听
61浏览 • 1回复 待解决
如何获取List组件滚动滚动距离
2603浏览 • 1回复 待解决
HarmonyOS list组件点击滚动居中
33浏览 • 1回复 待解决
LazyForEach如何添加数据
2027浏览 • 1回复 待解决