大数跨境

POS UI 扩展 2026-10 新增 s-pos-list,这是一个支持自定义行模板的虚拟化列表

POS UI 扩展 2026-10 新增 s-pos-list,这是一个支持自定义行模板的虚拟化列表 Shopify电商独立站
2026-10-22
5
导读:POS UI 扩展 API 版本 2026-10 新增了 s-pos-list,这是一个用于 Polaris Web Components 的虚拟化列表组件。您可以将行数据以纯数据形式传入,并使用由

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
【声明】内容源于网络
0
0
Shopify电商独立站
1234
内容 7146
粉丝 0
Shopify电商独立站 1234
总阅读87.4k
粉丝0
内容7.1k