@nativescript-community/ui-pager

A NativeScript 分页器/轮播组件，允许用户左右滑动浏览数据页面。

iOS 演示	Android 演示

目录

• 安装
• API
  • 属性
• 在 Angular 中的使用
  • 示例
• 在 React 中的使用
  • 示例
• 在 Svelte 中的使用
  • 示例
• 在 Vue 中的使用
  • 示例
• 自定义转换器

安装

从项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-pager

API

属性

Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.

在 Angular 中的使用

将模块导入到您的项目中。

import { PagerModule } from "@nativescript-community/ui-pager/angular";

@NgModule({
    imports: [
        PagerModule,
    ],
})

示例

• 静态分页器
  • 使用静态内容的一个简单分页器示例。
• 基本分页器
  • 使用动态内容的一个简单分页器示例。

在 React 中的使用

将模块导入到您的项目中。

import { Pager } from '@nativescript-community/ui-pager/react';

示例

• 基本分页器
  • 使用动态内容的一个简单分页器示例。

在 Svelte 中的使用

将模块导入到您的项目中。

import { registerNativeViewElement } from 'svelte-native/dom';

import PagerElement from '@nativescript-community/ui-pager/svelte';
import { PagerItem } from '@nativescript-community/ui-pager';

PagerElement.register();
registerNativeViewElement('pageritem', () => PagerItem);

示例

• 静态分页器
  • 使用静态内容的一个简单分页器示例。
• 基本分页器
  • 使用动态内容的一个简单分页器示例。

在 Vue 中的使用

将模块导入到您的项目中。

import Vue from 'nativescript-vue';
import Pager from '@nativescript-community/ui-pager/vue';

Vue.use(Pager);

示例

• 静态分页器
  • 使用静态内容的一个简单分页器示例。
• 基本分页器
  • 使用动态内容的一个简单分页器示例。

自定义转换器

您可以为 iOS/Android 定义自定义转换器

您可以根据 Scale 示例为 iOS 和 Android 创建自定义转换器。

然后您可以在应用启动时注册您的转换器（此示例注册了已包含但未注册的 Scale 转换器）

import { Pager } from '@nativescript-community/ui-pager';
import transformer from '@nativescript-community/ui-pager/transformers/Scale';

Pager.registerTransformer('scale', transformer)

然后您可以使用 transformers 属性的 Pager 来使用该转换器