POS UI 扩展 API 版本 2026-10 新增 s-pos-list,一个用于 Polaris Web 组件的虚拟化列表组件。您将行作为纯数据传入,并使用由 Web 组件构建的模板来布局每种类型的行。 s-pos-list 已 在 Shopify POS 11.17.0 及更高版本中提供 ,并替换了采用 2026-10 版本的扩展程序从 API 版本 2025-07 及更早版本中的 List List 组件 2025-07 。无需采取任何操作。 2026-10无需采取任何操作。
变更内容
List 组件随 API 版本 2025-07 结束,而 Polaris Web 组件当时没有可替代它的列表组件。s-pos-list 填补了这一空白。与 List 的固定行布局不同,每种类型的行都有自己的模板,因此一个列表可以混合标题、分隔符和内容行。
受影响对象
设置了 api_version = "2026-10" 并在 Shopify POS 11.17.0 或更高版本上运行的扩展可以使用 s-pos-list。API 版本 2026-07 及更早版本不包含此功能,对于停留在早期 API 版本或继续使用 List 的扩展而言,没有任何变化。
它适用于那些曾使用 List 并正在迁移到 Polaris Web 组件的扩展,以及通过映射行到 s-scroll-box 来构建长列表的扩展。
重要性
将行映射到 s-scroll-box 会使 POS 为每一行创建一个视图,导致显示时间和内存消耗随列表增长,且非常大的列表可能无法显示。s-pos-list 会在 POS 用户滚动时回收行视图。在配备 A16 芯片的 iPad 上使用最复杂的 List 行布局进行的测试表明,s-pos-list 显示和滚动大型列表的速度与 2025-07 List 一样快。
操作步骤
您无需更改现有扩展,因为 s-pos-list 是一个新组件,现有扩展将继续保持不变地工作。当您采用 API 版本 2026-10 并在 Shopify POS 11.17.0 或更高版本上运行时,您可以使用以下映射将 List 实现迁移到 s-pos-list:
| List (2025-07) | s-pos-list (2026-10) |
|---|---|
| data | rows。每行保留其 id 并添加 templateFor。 |
| leftSide 和 rightSide | 由 s-image、s-text、s-badge 和 s-switch 等组件构建的模板中的标记。 |
| onPress 在行上 | 列表上的 onRowClick。从 event.detail.item 读取行。对于之前没有 onPress 的行,使用 type="text" 模板。 |
| isLoadingMore 和 onEndReached | loadingMore 和 onLoadMore。 |
| listHeaderComponent | 带有 slot="header" 的子元素,例如 <s-search-field slot="header" />。与 listHeaderComponent 类似,它会随行一起滚动。 |
| title | 列表上方的 s-heading。与 title 类似,当行滚动时它会保持静止。 |
| imageDisplayStrategy | 您的模板。始终渲染图像区域,或在行字段上将其包裹在 {{#if}} 中。 |
当您将扩展更新到 2026-10 时,请使用此表调整您的列表属性和模板,以便 s-pos-list 匹配您之前的 List 行为。在 Shopify POS 11.17.0 或更高版本上进行测试,以确认长列表仍能按预期加载和滚动。
相关文档
- POS列表组件参考
- 将POS UI扩展升级到2025-10

