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

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架组件使用实现List头部插入数据时显示的项不变

实现List头部插入数据时显示的项不变

更新时间: 2026-06-26 07:47
本文导读

问题现象

当用户在聊天界面上滑时，通常需要从数据库中加载更早的消息，这些消息需要插入到当前消息列表的头部，如果直接将数据插入到头部而不进行其他操作，会使当前正在查看的消息被挤出屏幕。那么如何实现往List数据源数组的头部插入数据时List显示的项不变呢？

效果预览

背景知识

  • onScrollIndex在子组件划入或划出List显示区域时触发，可用于记录List当前项的索引位置。
  • scrollToIndex可以让ListItem滑动到指定Index，支持设置滑动额外偏移量。
  • currentOffset可以获取List当前的滑动偏移量，从而计算scrollToIndex所需的滑动额外偏移量。

解决方案

  1. 通过onScrollIndex记录当前索引位置。
  2. 插入新数据时，使当前Index的值更新为oldIndex+新插入数组长度，调用scrollToIndex接口滑动到更新后的索引处。
  3. 计算滑动额外偏移量：当ListItem一部分显示在可视区域内，一部分显示在可视区域外时，如果只让ListItem滑动到指定Index而不设置额外偏移量，会使当前显示的ListItem轻微滑动到完全显示，有碍阅读观感。因此需要将ListItem在可视区域外的高度作为滑动额外偏移量，使屏幕内容完全不变。完整示例代码如下：

完整示例参考如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct StableList {
  4.   @State listData: string[] =
  5.     ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
  6.   scrollerForList: Scroller = new Scroller();
  7.   @State ListIndex: number = 0;
  8.   @State nextItemIndex: number = 0;
  9. 

  10.   build() {
  11.     Column() {
  12.       Row() {
  13.         Button('头部插入数据')
  14.           .onClick(() => this.prependItems())
  15.           .margin(10);
  16.         Button('滚动到顶部')
  17.           .onClick(() => this.scrollerForList.scrollToIndex(0))
  18.           .margin(10);
  19.       };
  20. 

  21.       List({ space: 20, initialIndex: this.ListIndex, scroller: this.scrollerForList }) {
  22.         ForEach(this.listData, (item: string) => {
  23.           ListItem() {
  24.             Text(item)
  25.               .fontSize(20)
  26.               .width('100%')
  27.               .textAlign(TextAlign.Center)
  28.               .backgroundColor('#f5f5f5')
  29.               .height(60);
  30.           };
  31.         }, (item: string) => item);
  32.       }
  33.       .width('100%')
  34.       .height('80%')
  35.       .onScrollIndex((firstIndex: number) => {
  36.         this.ListIndex = firstIndex;
  37.       });
  38.     }
  39.     .width('100%')
  40.     .height('100%');
  41.   }
  42. 

  43.   prependItems() {
  44.     console.info(`索引${this.ListIndex}`, ` 偏移量${this.scrollerForList.currentOffset().yOffset}`);
  45.     const oldIndex: number = this.ListIndex;
  46.     const newItems: string[] = [];
  47.     for (let i = 0; i < 5; i++) {
  48.       newItems.push(`new item${this.nextItemIndex + i}`);
  49.     }
  50.     this.nextItemIndex += 5;
  51.     this.listData = [...newItems, ...this.listData];
  52.     // 计算新的位置并滚动
  53.     const newListLength: number = newItems.length;
  54.     const newIndex: number = oldIndex + newListLength;
  55.     this.scrollerForList.scrollToIndex(newIndex, false, undefined,
  56.       { extraOffset: { value: this.scrollerForList.currentOffset().yOffset - 80 * oldIndex, unit: 1 } });
  57.   }
  58. }
登录页面手机号输入长度不对仍然可以点击登录
如何改变Scroll组件在分屏后的滚动方式
相关推荐
文档List下拉刷新时如何保证更新后的页面停留在原始位置上
文档如何使用List组件实现流畅的无限下拉滑动效果
文档如何准确统计List中Item的曝光
文档List组件滑动时如何控制滑动幅度和滑动范围
文档列表左右滑动时表头与列表内容未整体双向同步滑动
文档List如何实时获取可见的ListItem索引值
文档Swiper组件动态加载数据及currentIndex保持
文档如何实现组件RTL方向排列与滑动效果
文档如何实现List滑动时数据更新不渲染到组件上
文档通过监听List滑动位置实现唤起组件的功能
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词