Harness the power of CollectionView（第 4 部分） - 下拉刷新和无限加载

这是突出显示CollectionView（一个功能强大的列表控件，具有循环利用行，在每个平台上提供一流的性能，以满足各种需求）系列的第 4 部分。

• 第 1 部分 - iOS 的可滑动单元格
• 第 2 部分 - Android 的可滑动单元格
• 第 3 部分 - 动态布局更改
• → 第 4 部分 - 下拉刷新和无限加载
• 第 5 部分 - 分组显示数据 - *即将推出*
• 第 6 部分 - 标题和页脚 - *即将推出*

👉 演示仓库

继续设置无限加载和下拉刷新功能。

设置无限加载

这也被称为“按需加载更多”，CollectionView 通过loadMoreItems事件内置了此功能。

<CollectionView loadMoreItems="{{ loadMoreItems }}" />

每当 CollectionView 滚动到其集合底部附近时，此事件都会触发。我们可以使用它的回调异步加载更多数据。

async function loadMoreItems() {
  const results = await Http.get(`https://domain.com/items?offset=20&limit=20`);
  items.push(...results);
}

这里的主要考虑因素是，您需要围绕正在加载的页面/偏移量进行一些状态控制。您可以查看演示仓库了解更多信息。

一个技巧是，您应该真正使用 @nativescript/core 的ObservableArray 进行items绑定与CollectionView，因为它会将集合更改优化到平台控件，这在动态添加/更新/删除绑定到控件的项目时特别强大。

设置下拉刷新

NativeScript 社区非常乐于助人！已经提供了一个插件，它可以完美地满足此特定需求：https://github.com/nativescript-community/ui-pulltorefresh

添加插件后

npm install @nativescript-community/ui-pulltorefresh

您可以像这样将其包围在您的CollectionView周围

<PullToRefresh refresh="{{ refreshList }}">
  <CollectionView loadMoreItems="{{ loadMoreItems }}" />
</PullToRefresh>

这将允许您连接任何回调以将项目重新加载到您的CollectionView中，它甚至保留了此类控件在 iOS 和 Android 上的自然平台外观和感觉。

您甚至可以更改背景和动画图标颜色

<PullToRefresh 
  refresh="{{ refreshList }}"
  indicatorFillColor="#f1f5f9"
  indicatorColor="#000"

确保元素已注册到选择的版本

根据您在 NativeScript 中使用的版本，您需要确保其组件已注册以供使用

import { PullToRefresh } from '@nativescript-community/ui-pulltorefresh'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('PullToRefresh', () => PullToRefresh)

// Solid
import { registerElement } from 'dominative';
registerElement('pullToRefresh', PullToRefresh);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('pullToRefresh', () => PullToRefresh);

// React
import { registerElement } from 'react-nativescript';
registerElement('pullToRefresh', () => PullToRefresh);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('PullToRefresh', () => PullToRefresh)

接下来我们将研究“分组”！

关于 nStudio

nStudio 由开源合作者于 2016 年创立，nStudio 因建立了一个健康的开源治理模型以服务于围绕 NativeScript 的全球社区利益而闻名。如果您需要在项目中获得专业帮助，nStudio 提供跨多个学科的服务，您可以通过[email protected]联系我们。