输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
FAQ

如何解决LazyForEach刷新数据时List无法滑动问题

更新时间: 2026-06-26 09:07
本文导读
展开章节

问题现象

通过LazyForEach加载的List列表项，给数据数组重新赋值刷新数据之后，并通过onDataReloaded方法通知组件重新刷新时，List组件滑动一段距离之后无法继续滑动。

问题代码示例参考如下：

收起
自动换行
深色代码主题
复制
  1. import { BaseDataSource } from './BaseDataSource';
  2. import { StringListModel } from './StringListModel';
  3. 

  4. @Entry
  5. @Component
  6. struct MyComponent {
  7.   private dataSource: BaseDataSource<string> = StringListModel.instance().getDataSource();
  8. 

  9.   aboutToAppear() {
  10.     StringListModel.instance().load();
  11.   }
  12. 

  13.   aboutToDisappear(): void {
  14.     StringListModel.instance().release();
  15.   }
  16. 

  17.   build() {
  18.     Column() {
  19. 

  20.       Button('刷新数据-添加hello')
  21.         .onClick(() => {
  22.           StringListModel.instance().loadByKeyword('hello');
  23.         });
  24. 

  25.       List({ space: 3 }) {
  26.         LazyForEach(this.dataSource, (item: string) => {
  27.           ListItem() {
  28.             Row() {
  29.               Text(item).fontSize(50)
  30.                 .onAppear(() => {
  31.                   console.info('appear:', `${item}`);
  32.                 });
  33.             }
  34.             .justifyContent(FlexAlign.Center)
  35.             .width('100%')
  36.             .margin({ left: 10, right: 10 });
  37.           };
  38.         }, (item: string) => item);
  39.       }
  40.       .height(0)
  41.       .layoutWeight(1)
  42.       .onReachEnd(() => {
  43.         StringListModel.instance().loadMore();
  44.       });
  45.     };
  46.   }
  47. }

BaseDataSource.ets：

收起
自动换行
深色代码主题
复制
  1. export class BaseDataSource<T> implements IDataSource {
  2.   // 存储实际数据的数组。
  3.   private datas: Array<T> = [];
  4.   // 存储所有已注册的数据变更监听器。
  5.   private listeners: Array<DataChangeListener> = [];
  6. 

  7.   totalCount(): number {
  8.     return this.datas.length;
  9.   }
  10. 

  11.   getData(index: number): T {
  12.     return this.datas[index];
  13.   }
  14. 

  15.   registerDataChangeListener(listener: DataChangeListener): void {
  16.     let index = this.listeners.indexOf(listener);
  17.     if (index < 0) {
  18.       this.listeners.push(listener);
  19.     }
  20.   }
  21. 

  22.   unregisterDataChangeListener(listener: DataChangeListener): void {
  23.     let index = this.listeners.indexOf(listener);
  24.     if (index >= 0) {
  25.       this.listeners.splice(index, 1);
  26.     }
  27.   }
  28. 

  29.   private notifyDataReloaded() {
  30.     for (let listener of this.listeners) {
  31.       listener.onDataReloaded();
  32.     }
  33.   }
  34. 

  35.   private notifyDataAdd(index: number, addCount: number = 1) {
  36.     for (let listener of this.listeners) {
  37.       let addOperation: DataAddOperation = {
  38.         type: DataOperationType.ADD,
  39.         index,
  40.         count: addCount
  41.       };
  42.       listener.onDatasetChange([addOperation]);
  43.     }
  44.   }
  45. 

  46.   private notifyDataDelete(index: number, delCount: number = 1) {
  47.     for (let listener of this.listeners) {
  48.       let delOperation: DataDeleteOperation = {
  49.         type: DataOperationType.DELETE,
  50.         index,
  51.         count: delCount
  52.       };
  53.       listener.onDatasetChange([delOperation]);
  54.     }
  55.   }
  56. 

  57.   private notifyDataChange(index: number) {
  58.     for (let listener of this.listeners) {
  59.       listener.onDataChange(index);
  60.     }
  61.   }
  62. 

  63.   setDatas(datas: Array<T>) {
  64.     this.datas = datas;
  65.     this.notifyDataReloaded();
  66.   }
  67. 

  68.   addData(data: T) {
  69.     this.addDatas([data]);
  70.   }
  71. 

  72.   addDatas(datas: Array<T>) {
  73.     let insertIndex = this.datas.length;
  74.     let addCount = datas.length;
  75.     this.datas.push(...datas);
  76.     this.notifyDataAdd(insertIndex, addCount);
  77.   }
  78. 

  79.   delData(index: number) {
  80.     this.datas.splice(index, 1);
  81.     this.notifyDataDelete(index);
  82.   }
  83. 

  84.   delAllData() {
  85.     let delCount = this.datas.length;
  86.     this.datas = [];
  87.     this.notifyDataDelete(0, delCount);
  88.   }
  89. 

  90.   changeData(index: number, data: T) {
  91.     if (index < 0 || index >= this.datas.length) {
  92.       return;
  93.     }
  94.     this.datas[index] = data;
  95.     this.notifyDataChange(index);
  96.   }
  97. 

  98.   release() {
  99.     this.datas = [];
  100.     this.listeners = [];
  101.   }
  102. }

DataLoader.ets：

收起
自动换行
深色代码主题
复制
  1. export class DataLoader {
  2.   static async getByPage(page: number, pageSize: number) {
  3.     let datas: Array<string> = []
  4.     for (let i = 0; i < pageSize; i++) {
  5.       datas.push(`第${page}页-${i}`)
  6.     }
  7.     return datas
  8.   }
  9. 

  10.   static async getByKeyWord(keyword: string, page: number, pageSize: number) {
  11.     let datas: Array<string> = []
  12.     for (let i = 0; i < pageSize; i++) {
  13.       datas.push(`${keyword}-第${page}页-${i}`)
  14.     }
  15.     return datas
  16.   }
  17. 

  18.   static async getByFirstLetter(letter: string, page: number, pageSize: number) {
  19.     let datas: Array<string> = []
  20.     for (let i = 0; i < pageSize; i++) {
  21.       datas.push(`${letter}-第${page}页-${i}`)
  22.     }
  23.     return datas
  24.   }
  25. }

StringListModel.ets：

收起
自动换行
深色代码主题
复制
  1. import { BaseDataSource } from './BaseDataSource';
  2. import { DataLoader } from './DataLoader';
  3. 

  4. const MIN_PAGE_SIZE = 30;
  5. 

  6. export class StringListModel {
  7.   private static sInstance: StringListModel | null;
  8.   private stringDataSource: BaseDataSource<string> = new BaseDataSource();
  9.   private curPage: number = 0;
  10.   private pageSize: number = MIN_PAGE_SIZE;
  11.   private hasMoreData: boolean = true;
  12.   private keyword?: string;
  13.   private firstLetter?: string;
  14. 

  15.   private constructor() {
  16.   }
  17. 

  18.   static instance() {
  19.     if (!StringListModel.sInstance) {
  20.       StringListModel.sInstance = new StringListModel();
  21.     }
  22.     return StringListModel.sInstance;
  23.   }
  24. 

  25.   // 设置每页加载的数量。
  26.   setPageSize(pageSize: number) {
  27.     if (pageSize >= MIN_PAGE_SIZE) {
  28.       this.pageSize = pageSize;
  29.     }
  30.   }
  31. 

  32.   getDataSource() {
  33.     return this.stringDataSource;
  34.   }
  35. 

  36.   // 加载第一页成语数据。
  37.   load() {
  38.     this.keyword = undefined;
  39.     this.firstLetter = undefined;
  40.     this.curPage = 0;
  41.     this.hasMoreData = true;
  42.     this.loadData(true);
  43.   }
  44. 

  45.   // 通过关键字来查找并加载第一页成语数据。
  46.   loadByKeyword(keyword: string) {
  47.     if (this.keyword !== undefined && this.keyword === keyword) {
  48.       return;
  49.     }
  50.     this.keyword = keyword;
  51.     this.firstLetter = undefined;
  52.     this.curPage = 0;
  53.     this.hasMoreData = true;
  54.     this.loadData(true);
  55.   }
  56. 

  57.   // 通过拼音首字母来查找并加载第一页成语数据。
  58.   loadByFirstLetter(firstLetter: string) {
  59.     if (this.firstLetter !== undefined && this.firstLetter === firstLetter) {
  60.       return;
  61.     }
  62.     this.firstLetter = firstLetter;
  63.     this.keyword = undefined;
  64.     this.curPage = 0;
  65.     this.hasMoreData = true;
  66.     this.loadData(true);
  67.   }
  68. 

  69.   // 加载更多成语数据。
  70.   loadMore() {
  71.     if (!this.hasMoreData) {
  72.       return;
  73.     }
  74.     this.curPage++;
  75.     this.loadData(false);
  76.   }
  77. 

  78.   private loadData(isFirstPage: boolean) {
  79.     let loadCallback = (datas: Array<string>) => {
  80.       if (!datas || datas.length === 0) {
  81.         this.hasMoreData = false;
  82.         return;
  83.       }
  84. 

  85.       this.hasMoreData = datas.length === this.pageSize;
  86.       if (isFirstPage && this.stringDataSource.totalCount() > 0) {
  87.         this.stringDataSource.setDatas(datas);
  88.       } else {
  89.         this.stringDataSource.addDatas(datas);
  90.       }
  91.     };
  92. 

  93.     if (this.keyword !== undefined) {
  94.       DataLoader.getByKeyWord(this.keyword, this.curPage, this.pageSize).then(loadCallback);
  95.     } else if (this.firstLetter !== undefined) {
  96.       DataLoader.getByFirstLetter(this.firstLetter, this.curPage, this.pageSize).then(loadCallback);
  97.     } else {
  98.       DataLoader.getByPage(this.curPage, this.pageSize).then(loadCallback);
  99.     }
  100.   }
  101. 

  102.   // 在页面销毁时调用。
  103.   release() {
  104.     this.stringDataSource.release();
  105.     StringListModel.sInstance = null;
  106.   }
  107. }

问题效果预览：

效果预览

背景知识

  • onDataReloaded能够通知组件重新加载所有数据，键值没有变化的数据项会使用原先的子组件，键值发生变化的会重建子组件，重新加载数据完成后调用。
  • onDatasetChange进行批量的数据处理后，调用onDatasetChange接口通知组件按照dataOperations刷新组件，与其它操作数据的接口不能混用。

问题定位

由问题代码可知，自定义方法notifyDataReloaded调用了onDataReloaded通知数据的重新加载，而调用onDataReloaded时，键值没有变化的数据项会使用原先的子组件，键值发生变化的会重建子组件，而单纯的调用onDataReloaded刷新数据并不会更新键值，因此在问题图中，当LazyForEach刷新数据之后，由于没有继续重建子组件，而是复用了原先的子组件，导致List列表项下滑到一定程度就无法继续下滑。

分析结论

在刷新数据时需要进行数据添加操作，使子组件得以重建而非复用。

修改建议

  • 方案一：在自定义方法notifyDataReloaded中使用onDatasetChange方法代替onDataReloaded进行组件重新加载数据，onDatasetChange能够进行批量的数据处理，包括数据添加、重载所有数据等操作，可以避免复用原先的子组件。也可以对调用notifyDataReloaded方法的setDatas方法添加数据添加功能，修改后的BaseDataSource：
    收起
    自动换行
    深色代码主题
    复制
    1. export class BaseDataSource<T> implements IDataSource {
    2.   private datas: Array<T> = [];
    3.   private listeners: Array<DataChangeListener> = [];
    4. 

    5.   totalCount(): number {
    6.     return this.datas.length;
    7.   }
    8. 

    9.   getData(index: number): T {
    10.     return this.datas[index];
    11.   }
    12. 

    13.   registerDataChangeListener(listener: DataChangeListener): void {
    14.     let index = this.listeners.indexOf(listener);
    15.     if (index < 0) {
    16.       this.listeners.push(listener);
    17.     }
    18.   }
    19. 

    20.   unregisterDataChangeListener(listener: DataChangeListener): void {
    21.     let index = this.listeners.indexOf(listener);
    22.     if (index >= 0) {
    23.       this.listeners.splice(index, 1);
    24.     }
    25.   }
    26. 

    27.   private notifyDataReloaded() {
    28.     for (let listener of this.listeners) {
    29.       let reloadOperation: DataReloadOperation = {
    30.         type: DataOperationType.RELOAD
    31.       };
    32.       listener.onDatasetChange([reloadOperation]);
    33.     }
    34.   }
    35. 

    36.   private notifyDataAdd(index: number, addCount: number = 1) {
    37.     for (let listener of this.listeners) {
    38.       let addOperation: DataAddOperation = {
    39.         type: DataOperationType.ADD,
    40.         index,
    41.         count: addCount
    42.       };
    43.       listener.onDatasetChange([addOperation]);
    44.     }
    45.   }
    46. 

    47.   private notifyDataDelete(index: number, delCount: number = 1) {
    48.     for (let listener of this.listeners) {
    49.       let delOperation: DataDeleteOperation = {
    50.         type: DataOperationType.DELETE,
    51.         index,
    52.         count: delCount
    53.       };
    54.       listener.onDatasetChange([delOperation]);
    55.     }
    56.   }
    57. 

    58.   private notifyDataChange(index: number) {
    59.     for (let listener of this.listeners) {
    60.       listener.onDataChange(index);
    61.     }
    62.   }
    63. 

    64. 

    65.   setDatas(datas: Array<T>) {
    66.     this.datas = datas;
    67.     let insertIndex = this.datas.length;
    68.     let addCount = datas.length;
    69.     this.datas.push(...datas);
    70.     this.notifyDataAdd(insertIndex, addCount);
    71.   }
    72. 

    73.   addData(data: T) {
    74.     this.addDatas([data]);
    75.   }
    76. 

    77.   addDatas(datas: Array<T>) {
    78.     let insertIndex = this.datas.length;
    79.     let addCount = datas.length;
    80.     this.datas.push(...datas);
    81.     this.notifyDataAdd(insertIndex, addCount);
    82.   }
    83. 

    84.   delData(index: number) {
    85.     this.datas.splice(index, 1);
    86.     this.notifyDataDelete(index);
    87.   }
    88. 

    89.   delAllData() {
    90.     let delCount = this.datas.length;
    91.     this.datas = [];
    92.     this.notifyDataDelete(0, delCount);
    93.   }
    94. 

    95.   changeData(index: number, data: T) {
    96.     if (index < 0 || index >= this.datas.length) {
    97.       return;
    98.     }
    99.     this.datas[index] = data;
    100.     this.notifyDataChange(index);
    101.   }
    102. 

    103.   release() {
    104.     this.datas = [];
    105.     this.listeners = [];
    106.   }
    107. }
  • 方案二：将setDatas方法替换为先删除后再添加的方法，修改后StringListModel：
    收起
    自动换行
    深色代码主题
    复制
    1. import { BaseDataSource } from './BaseDataSource';
    2. import { DataLoader } from './DataLoader';
    3. 

    4. const MIN_PAGE_SIZE = 30;
    5. 

    6. export class StringListModel {
    7.   private static sInstance: StringListModel | null;
    8.   private stringDataSource: BaseDataSource<string> = new BaseDataSource();
    9.   private curPage: number = 0;
    10.   private pageSize: number = MIN_PAGE_SIZE;
    11.   private hasMoreData: boolean = true;
    12.   private keyword?: string;
    13.   private firstLetter?: string;
    14. 

    15.   private constructor() {
    16.   }
    17. 

    18.   static instance() {
    19.     if (!StringListModel.sInstance) {
    20.       StringListModel.sInstance = new StringListModel();
    21.     }
    22.     return StringListModel.sInstance;
    23.   }
    24. 

    25.   /**
    26.    * 设置每页加载的数量
    27.    * @param pageSize 每页加载数量不能小于最小加载数量
    28.    */
    29.   setPageSize(pageSize: number) {
    30.     if (pageSize >= MIN_PAGE_SIZE) {
    31.       this.pageSize = pageSize;
    32.     }
    33.   }
    34. 

    35.   getDataSource() {
    36.     return this.stringDataSource;
    37.   }
    38. 

    39.   /**
    40.    * 加载第一页成语数据
    41.    */
    42.   load() {
    43.     this.keyword = undefined;
    44.     this.firstLetter = undefined;
    45.     this.curPage = 0;
    46.     this.hasMoreData = true;
    47.     this.loadData(true);
    48.   }
    49. 

    50.   /**
    51.    * 通过关键字来查找并加载第一页成语数据
    52.    * @param keyword
    53.    */
    54.   loadByKeyword(keyword: string) {
    55.     if (this.keyword !== undefined && this.keyword === keyword) {
    56.       return;
    57.     }
    58.     this.keyword = keyword;
    59.     this.firstLetter = undefined;
    60.     this.curPage = 0;
    61.     this.hasMoreData = true;
    62.     this.loadData(true);
    63.   }
    64. 

    65.   /**
    66.    * 通过拼音首字母来查找并加载第一页成语数据
    67.    * @param firstLetter
    68.    */
    69.   loadByFirstLetter(firstLetter: string) {
    70.     if (this.firstLetter !== undefined && this.firstLetter === firstLetter) {
    71.       return;
    72.     }
    73.     this.firstLetter = firstLetter;
    74.     this.keyword = undefined;
    75.     this.curPage = 0;
    76.     this.hasMoreData = true;
    77.     this.loadData(true);
    78.   }
    79. 

    80.   /**
    81.    * 加载更多成语数据
    82.    */
    83.   loadMore() {
    84.     if (!this.hasMoreData) {
    85.       return;
    86.     }
    87.     this.curPage++;
    88.     this.loadData(false);
    89.   }
    90. 

    91.   private loadData(isFirstPage: boolean) {
    92.     let loadCallback = (datas: Array<string>) => {
    93.       if (!datas || datas.length === 0) {
    94.         this.hasMoreData = false;
    95.         return;
    96.       }
    97. 

    98.       this.hasMoreData = datas.length === this.pageSize;
    99. 

    100.       if (isFirstPage && this.stringDataSource.totalCount() > 0) {
    101.         this.stringDataSource.delAllData();
    102.         this.stringDataSource.addDatas(datas);
    103.       } else {
    104.         this.stringDataSource.addDatas(datas);
    105.       }
    106. 

    107.     };
    108.     if (this.keyword !== undefined) {
    109.       DataLoader.getByKeyWord(this.keyword, this.curPage, this.pageSize).then(loadCallback);
    110.     } else if (this.firstLetter !== undefined) {
    111.       DataLoader.getByFirstLetter(this.firstLetter, this.curPage, this.pageSize).then(loadCallback);
    112.     } else {
    113.       DataLoader.getByPage(this.curPage, this.pageSize).then(loadCallback);
    114.     }
    115.   }
    116. 

    117.   /**
    118.    * 释放。可在页面销毁时调用，如page页中的aboutToDisappear方法中
    119.    */
    120.   release() {
    121.     this.stringDataSource.release();
    122.     StringListModel.sInstance = null;
    123.   }
    124. }

常见FAQ

Q：为什么onDatasetChange方法不能与其它操作数据的接口混用？

A：onDatasetChange方法用于通知LazyForEach组件进行批量的数据处理。该方法接受一个包含多个数据操作的数组作为参数。这些操作可以包括数据的添加、删除、移动等。当在onDatasetChange中传入包含删除操作的数据集时，系统会认为这是一个不兼容的操作，从而导致崩溃。因此onDatasetChange方法不能与其他操作数据的接口混用。

Q：使用onDatasetChange方法有哪些注意点？

A：调用一次onDatasetChange时，每个index对应的数据只能被操作一次。如果多次操作同一个index，LazyForEach仅生效第一次操作。并且onDatasetChange不能与其他DataChangeListener的更新接口混用。如在同一个LazyForEach中，调用过onDataAdd接口后，不能再调用onDatasetChange接口；反之，调用过onDatasetChange接口后，也不能调用onDataAdd等其他更新接口。页面中不同LazyForEach之间互不影响。具体可参考官网指南LazyForEach中的数据更新、onDatasetChange。

相关推荐
文档List下拉刷新时如何保证更新后的页面停留在原始位置上
文档LazyForEach懒加载修改数据界面不刷新
文档LazyForEach删除数据出错
文档LazyForEach渲染的List列表上滑触发刷新动画
文档LazyForEach的键值与数据刷新异常问题
文档应用内列表滑动后出现重复数据
文档长列表数据刷新闪烁
文档新请求数据和上次数据相同时LazyForEach内子组件不更新的问题如何解决
文档解决LazyForEach懒加载数据UI渲染失败的问题
文档实现List下拉刷新和上拉加载更多
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词