一个 NativeScript 小部件，可让您轻松滑动和缩放图片列表。

截图

安装

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

tns plugin add nativescript-image-swipe

此命令将自动安装必要的文件，并在您的项目 package.json 文件中将 nativescript-image-swipe 存储为依赖项。

配置

无需额外配置！

API

事件

• pageChanged
  当用户在列表中滑动到下一张/上一张图片时触发。

静态属性

• pageChangedEvent - String
  用于连接 pageChanged 事件的字符串值。

实例属性

• ios - UIScrollView
  获取表示此组件用户界面的原生 iOS 视图。仅在 iOS 上有效。

• android - android.support.v4.view.ViewPager
  获取表示此组件用户界面的原生 android 小部件。仅在 Android 操作系统上有效。

• items - Array | ObservableArray
  获取或设置 ImageSwipe 的项目集合。items 属性可以设置为数组或定义长度和 getItem(index) 方法的对象。

• pageNumber - Number
  获取或设置当前可见的图片。

• imageUrlProperty - string
  获取或设置定义从哪里加载图片的 URL 的 items 对象中的属性。

• allowZoom - boolean (默认: true)
  获取或设置是否启用缩放。

用法

您需要将 xmlns:is="nativescript-image-swipe" 添加到您的页面标签中，然后简单地使用 <is:ImageSwipe/> 将小部件添加到您的页面。

<!-- test-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:is="nativescript-image-swipe" navigatingTo="navigatingTo">
    <GridLayout>
        <is:ImageSwipe items="{{ items }}" imageUrlProperty="imageUrl" 
                       pageNumber="{{ pageNumber }}" pageChanged="pageChanged" backgroundColor="#000000">
        </is:ImageSwipe>
    </GridLayout>
</Page>

// test-page.ts
import { EventData, Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import { Page } from "ui/page";

import { PageChangeEventData } from "nativescript-image-swipe";

let viewModel: Observable;

export function navigatingTo(args: EventData) {
    const page = args.object as Page;
    const items = new ObservableArray();

    items.push({ imageUrl: "http://something.com/picture1.jpg" });
    items.push({ imageUrl: "http://something.com/picture2.jpg" });
    items.push({ imageUrl: "http://something.com/picture3.jpg" });
    items.push({ imageUrl: "http://something.com/picture4.jpg" });
    items.push({ imageUrl: "http://something.com/picture5.jpg" });

    viewModel = new Observable();
    viewModel.set("items", items);
    viewModel.set("pageNumber", 3);

    page.bindingContext = viewModel;
}

export function pageChanged(e: PageChangeEventData) {
    console.log(`Page changed to ${e.page}.`);
}

在 Angular 中的用法

为了使用 ImageSwipe，您必须在 两者 中注册它：您的 main.ts 和 main.aot.ts！

// main.ts
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { registerElement } from "nativescript-angular/element-registry";

import { AppModule } from "./app.module";

registerElement("ImageSwipe", () => require("nativescript-image-swipe/image-swipe").ImageSwipe);

platformNativeScriptDynamic().bootstrapModule(AppModule);

<!-- test.component.html -->
<GridLayout>
    <ImageSwipe [items]="items" imageUrlProperty="imageUrl" 
                [pageNumber]="pageNumber" (pageChanged)="pageChanged($event)" backgroundColor="#000000">
    </ImageSwipe>
</GridLayout>

// test.component.ts
import { Component, OnInit } from "@angular/core";
import { PageChangeEventData } from "nativescript-image-swipe";

@Component({
    selector: "demo",
    moduleId: module.id,
    templateUrl: "./test.component.html",
})
export class ImageSwipeComponent implements OnInit {
    public items: any[] = [];
    public pageNumber: number = 3;

    ngOnInit(): void {
        this.items.push({ imageUrl: "http://something.com/picture1.jpg" });
        this.items.push({ imageUrl: "http://something.com/picture2.jpg" });
        this.items.push({ imageUrl: "http://something.com/picture3.jpg" });
        this.items.push({ imageUrl: "http://something.com/picture4.jpg" });
        this.items.push({ imageUrl: "http://something.com/picture5.jpg" });
    }

    public pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }
}

演示

此存储库包含 Angular 和纯 NativeScript 演示。要运行这些演示，请在您的 shell 中执行以下操作

$ git clone https://github.com/peterstaev/nativescript-image-swipe
$ cd nativescript-image-swipe
$ npm install
$ npm run demo-ios

这将运行纯 NativeScript 演示项目在 iOS 上。如果您想运行 Android，只需使用 -android 而不是 -ios 后缀。

如果您想运行 Angular 演示，只需使用 demo-ng- 前缀而不是 demo-。

捐赠

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC