HarmonyOS WaterFlow数据更新后，使用scrollToIndex(0)后，瀑布流数据发生变化

WaterFlow数据更新后，使用scrollToIndex(0)后，瀑布流数据发生变化。这里实现了一个swiper+瀑布流+底层导航栏的一个功能，其中瀑布流的数据是通过网络加载进来的，会在页面初始化的时候加载20条数据，然后再在快要滑动到底部时再加载20条数据。然后在点击底层导航栏上的图标时希望瀑布流回到第一项的位置，瀑布流展示的是回到第一项的位置了，但是瀑布流里的item位置却发生了变化。请问这种情况应该怎么查找原因？瀑布流数据类如下：

import { NetworkUtil } from '../utils/NetworkUtil';
import { WaterFlowData } from './WaterFlowData';
@Observed
export class WaterFlowListData {
  dataSource: BasicDataSource = new BasicDataSource();
  getData(): BasicDataSource {
    return this.dataSource;
  }
  async addData(pageNo: number, pageSize: number) {
    let tmp: WaterFlowData[] = await NetworkUtil.getWaterFlowData(pageNo, pageSize);
    this.dataSource.addData(tmp);
  }
}
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: WaterFlowData[] = [];
  totalCount(): number {
    return this.originDataArray.length;
  }
  getData(index: number): WaterFlowData {
    return this.originDataArray[index];
  }
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
  public addData(data: WaterFlowData[]): void {
    let len = this.originDataArray.length;
    if (len === 0) {
      this.originDataArray = data;
      this.notifyDataReload();
      this.notifyDataAdd(len);
    } else {
      for (let i = 0; i < data.length; i++) {
        this.originDataArray.splice(this.originDataArray.length, 0, data[i]);
        this.notifyDataAdd(this.originDataArray.length);
      }
    }
  }
  public pushData(data: WaterFlowData): void {
    this.originDataArray.push(data);
    this.notifyDataAdd(this.originDataArray.length - 1);
  }
  public deleteData(index: number): void {
    this.originDataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }
  public clearData(): void {
    this.originDataArray = [];
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.

瀑布流布局如下：

@Component
export struct WaterFlowView {
  @Link waterFlowListData: WaterFlowListData;
  public waterFlowScroller: Scroller = new Scroller();
  @StorageLink(BreakpointConstants.BREAKPOINT_NAME) currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG;
  @StorageLink("pageNo") pageNo: number = 1;
  @StorageLink("pageSize") pageSize: number = 20;
  build() {
    Column() {
      Column({ space: DataUtils.fromResToNumber($r('app.float.space_8')) }) {
        WaterFlow({footer: this.footStyle, scroller: this.waterFlowScroller}) {
          LazyForEach(this.waterFlowListData.getData(), (item: WaterFlowData, index: number) => {
            FlowItem() {
              WaterFlowCardView({
                thumbnails: item.thumbnails,
                source: item.source,
                title: item.title,
                userImage: item.userImage,
                vipSign: item.vipSign,
                userName: item.userName,
                collectionsCount: item.collectionsCount,
                url: item.url,
                type: item.type
              })
            }
            .backgroundColor(Color.White)
            .reuseId("WaterFlowCardView")
            .width($r('app.string.full_screen'))
            .clip(true)
            .borderRadius($r('app.float.rounded_size_16'))
            .onAppear(() => {
              if (this.waterFlowListData.dataSource.totalCount() < 500 &&
                index + 20 === this.waterFlowListData.dataSource.totalCount()) {
                setTimeout(() => {
                  this.pageNo ++;
                  //TODO 测试代码，待正式云服务器发布后调整
                  if (this.pageNo > 3) {
                    this.pageNo = Math.round(Math.random() * 3);
                  }
                  this.waterFlowListData.addData(this.pageNo, this.pageSize);
                }, 100)
              }
            })
          }, (item: WaterFlowData) => item.index.toString())
        }
        .cachedCount(10)
        .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
        .columnsTemplate(new BreakpointType({
          sm: BreakpointConstants.GRID_NUM_TWO,
          md: BreakpointConstants.GRID_NUM_THREE,
          lg: BreakpointConstants.GRID_NUM_FOUR
        }).getValue(this.currentBreakpoint))
        .columnsGap($r('sys.float.ohos_id_elements_margin_vertical_m'))
        .rowsGap($r('sys.float.ohos_id_elements_margin_horizontal_m'))
        .layoutDirection(FlexDirection.Column)
        .itemConstraintSize({
          minWidth: 0,
          maxWidth: $r('app.string.full_screen'),
          minHeight: 0,
        })
        .onReachEnd(() => {
        })
      }
      .width($r('app.string.full_screen'))
      .height($r('app.string.full_screen'))
    }
    .height($r('app.string.full_screen'))
    .margin({ top: $r('app.float.margin_8'), bottom: $r('app.float.navigation_height_sm'),
      left: new BreakpointType({
        sm: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_LEFT_SM,
        md: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_LEFT_MD,
        lg: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_LEFT_LG
      }).getValue(this.currentBreakpoint),
      right : new BreakpointType({
        sm: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_RIGHT_SM,
        md: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_RIGHT_MD,
        lg: BreakpointConstants.SEARCHBAR_AND_WATERFLOW_MARGIN_RIGHT_LG
      }).getValue(this.currentBreakpoint) })
  }
  aboutToAppear(): void {
    this.waterFlowListData.addData(this.pageNo, this.pageSize);
  }
  @Builder
  footStyle() {
    Row () {
      Text('—已到达底部—')
        .fontWeight(400)
        .fontSize(14)
        .height(19)
        .margin({bottom:10})
        .opacity(0.4)
    }
    .width('100%')
    .height('20%')
    .alignItems(VerticalAlign.Bottom)
    .justifyContent(FlexAlign.Center)
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.