在 NativeScript 中探索 List 组件
List UI 组件是您在实现移动应用程序时将使用到的最重要的组件之一。它是处理数据的每个应用程序的核心部分。这自然使其成为每个应用程序框架（如 NativeScript）的重要组成部分。一个好的 List 组件将为您节省大量开发时间！
在过去几年中，随着 UX 在应用程序（尤其是移动应用程序）的设计和实现中变得越来越重要，ListView 组件获得了许多功能，这些功能现在被期望可以直接使用。
我在 Telerik 的不同团队中花费了大量时间来实现几个 ListView 组件，我很高兴我们将大量经验应用到 NativeScript 的原生 iOS/Android 列表组件中。
您可以看到我们在跨平台原生 NativeScript 的 ListView 中的工作成果，它是完全免费的 NativeScript UI 包的一部分。 要亲身体验它，只需安装此应用程序。
我将使用这篇博文来重点介绍您应该从一个强大的跨平台开发应用程序框架的一部分的列表组件中期待的最重要的功能。一个好的列表组件可以决定一个好的框架和一个亚军框架之间的区别。
我们可以将这些功能分为两个主要部分——性能和可用性。
让我们先谈谈性能。
性能：延迟数据加载
“延迟数据加载”，也称为“按需加载数据”，是每个值得尊重的应用程序框架的必备功能。
假设您在后端有一个包含 10 万个产品的列表，需要在移动设备上显示。如果您尝试获取所有记录并立即显示它们，您很可能遇到内存溢出异常，或者在最好的情况下表现非常缓慢。对于每个产品，将在设备内存中实例化一个新对象，然后实例化一个新的列表单元格并在 ListView 组件中显示。
如果您这样做，您可能已经失去用户了。许多 UX 测试表明，用户注意力丢失之前的时间应该少于一秒。
延迟加载数据如何帮助？与其一次加载所有 10 万条记录，您可以指示列表仅加载前 20 条记录，并在屏幕上立即显示它们。在那之后，当用户向下滚动列表时，它会自动请求下一批 10 条记录并显示它们。所有这一切都对用户透明。您可以通过在服务器上执行过滤和排序来选择要显示的确切数据。
性能：虚拟化
在上述场景中，如果您的用户滚动很多，仍然会有很多数据保留在内存中——例如，已经不再显示的旧项目仍然保留在设备内存中。为了避免这种情况发生，应该使用一项名为项目虚拟化的功能。此功能的核心概念是，只有少量 ListView 行应该被实例化并驻留在内存中。通常，这个数字在单个视图屏幕中显示的项目数量的 1.5 到 2 倍之间，或者通常是 20。确切的数字当然取决于屏幕大小和每个列表项的高度。当 ListView 组件滚动且特定 ListView 项目不再可见时，不可见的项目将被回收并保存在本地内存缓存中。当需要从滚动手势创建一个新的 ListView 项目时，将使用先前缓存的项目，并填充新 ListView 项目的特定数据。
这允许更快的项目可视化并保持低内存使用率。此主题在 Android 和 iOS 官方文档中得到了更详细的介绍。
这些是使您的数据列表滚动速度更快并能够处理任何数量数据的关键功能。让我们看看我们的移动用户已经习惯了哪些用户体验功能。
UX：手势
手势支持在小型移动屏幕外形尺寸上至关重要。近年来，用户与 UI 交互方式发生了许多创新。
有几种常见的手势，现在已成为每个原生列表组件中的事实上的标准。
UX：下拉刷新
下拉刷新是一个允许您刷新 ListView 中数据的概念。我认为它是在几年前首次出现在 Twitter 应用程序中。在那之后，下拉刷新成为事实上的标准。下拉刷新现在在显示时间敏感数据的原生 OS 中的许多地方都可用。
UX：向左或向右滑动
在移动应用程序中，ListView 的常见手势中最近添加了一个功能，即在 ListView 项目上向左或向右滑动以执行操作。它在移动邮件客户端中非常流行。向左滑动允许您删除该项目，向右滑动将该项目标记为已读。当然，这些只是一些示例。您可以将任何自定义操作附加到滑动手势。
UX：项目拖放/重新排序
另一个基于手势的强大概念是项目重新排序。
布局选项
对不同布局选项的支持是必须的。ListView 应该响应式，并在纵向模式、横向模式或更大的比例因子（例如平板电脑）中查看时更改其布局。
此外，取决于数据，有更适合的选项来布局项目。例如，包装布局可能是照片库应用程序的合适布局。
结束语
如您所见，现代用户期望对移动应用程序的用户体验提出了很高的要求。您可以使用 NativeScript 构建出色的用户体验，因为您可以直接使用原生 UI 组件，而且我们付出了很多努力来使常见组件（如 List）功能非常丰富。您的应用程序不需要为了性能而牺牲用户体验，因为 NativeScript 使您可以直接访问设备的原生功能。
尽情享受完整的代码/技能重用和最大程度的原生性能。这就是我们对 NativeScript 的看法。这就是我们为您提供的！
要亲身体验 NativeScript，请将应用程序安装到您的手机上。
喜欢您所阅读的内容？ 请在 Twitter 上与您的关注者分享。