官方博客-在NativeScript里探索List组件

当实现一个移动应用的时候,List UI组件是做重要的组件。他是每个应用处理数据的核心部分。他自然也成为了NativeScript中的重要组件。一个好的List组件可以节省大量的开发时间!

在过去的一年里,当UX在设计中变成了重要的因素并在程序中也很重要(特别在移动端),ListView组件现在也提供了几个开箱即用的功能。

Telerik的不同团队花费了大量时间去实现了一些Listview组件,我们也很高兴我们能把原生IOS/Android的经验应用到NativeScript。

NativeScript的ListView中你能看到我们的工作结果。他是完全免费的NativeScript的UI。你可以安装一个简单的应用,去运行在我们自己的设备上。

我们使用博客的方式去突出这个重要的特性,但是你应该可以看到这只是强大跨平台开发应用框架的一部分。一个好的列表组件可以使好的框架和第二名的框架有很多的区别。

我们分两个部分讲解 —— 性能和易用性

让我们首先来探讨一些性能。

性能:数据懒加载

懒加载也称为延迟加载,对于每一个可敬的应用框架都是必须品。

假设你有100000个产品在你的后端,他需要显示到移动设备。如果你尝试一次性显示所有的数据,那么你可能会爆出一个内存溢出的异常,哪怕没有异常,他加载也不会快。因为每个产品实例化一个新的对象存在设备内存中,然后每一个都是一个新的列表单元他们将被实例化并显示在ListView组件。

如果你这样去做,我想你已经失去了你的用户。许多UX测试表明超过一秒钟你就会失去用户的注意力。

延迟加载数据如何做?而不是一次性加载100K条数据,你要命令列表之家在一部分数据– 20条并显示在屏幕上。当用户向下滚动到底部,会自动加载10条数据并显示在屏幕上。这一切对于用户来说很容易理解。你只需要正确的检索数据或者从服务器上排序。

请看:如何使用这个特性

 

性能:虚拟化

在上面的例子中,如果你的用户大量滚动,在内存中依然会堆积很多的数据–例如,很多旧的东西已经不需要显示了但依旧保存在内存中。为了避免这种情况的发生,一个虚拟化特性出场了。这个特性的核心概念是,只让少量的listview行实例化,驻留在内存中。通常显示一屏的1.5到2倍的数据最好,或者直接显示20个。精确的数字依赖于屏幕的大小和每个列表元素的高度。当列表视图(ListView)组件滚动,第一屏显示的的listview项就不见了,这些不见得项就被回收了,并保存在本地内存缓存中。当回滚屏幕一个新的listview项在滚动中需要被创建,之前被缓存的项将会被使用并再次加入进来。

他可以保障更快的项的显示和内存的低使用率。更多细节都在Android和IOS官方文档。

这些都是重要的特性,它将让你的数据滚动速度更快,并能处理任意数量的数据。让我们看看什么是用户体验,这就是:用户已经习惯了这样去使用。

 

UX:手势

手势在小屏幕的移动设备中至关重要。过去这些年有很多用户交互上的创新。

有几种常见的手势,现在在每一个列表组件中都是标配。

 

UX: 下拉刷新

shot

下拉刷新是一个概念,它允许您刷新列表视图(listview)中的数据。他是前几年首次在Twitter中使用。之后,下拉刷新就变成了一个标准。现在下拉刷新在原生OS的很多地方使用,在这里最新的数据将会被显示。

 

请看:在Nativescript中怎样去下拉刷新

 

UX:向左或向右滑动

近期在移动应用中还有一些别的常见手势,向左向右滑动列表视图(listview)的一条记录并执行相应的动作。他在邮件客户端非常流行。向左滑动去删除项,向右滑动标记此项已阅读。当然这只是其中的一个例子。你可以附加任何自定义的动作到滑动手势。

457d64e5dd42cf2f042da83a366d687c

 

UX: 项目拖动/重新排序

另一个强大的基于手势的概念是项目重新排序。

pasted image 0

 

Layout 选项

支持不同的Layout选项是必须的。ListView应该能够自适应和修改Layout,也就是说当试图变成横屏或者更大的平板设备时,他应该可以自适应或者调整布局。

也依赖这些数据,这里有许多的优质的配置选项来定制这些列表项。例如,一个相册应用程序的Wrap布局就是恰当的布局。

 

最后

正如你看到的,现在的用户体验在移动应用里要求非常高。你在nativescript能够构建令人惊艳的用户体验,因为你能够使用真正原生的UI组件,因为nativescript通过努力让通用组件的特性更加丰富。你的应用也不需要为了性能而妥协用户体验,因为Nativescript给你直接访问本地设备的能力。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">