贡献 - 求助

此插件由 NativeScript 社区支持。所有 PR 都受欢迎，但请确保在创建新的 PR 之前，演示应用程序能够正确运行。如果您没有遇到问题但想为此插件做出贡献，您可以在此处找到正在进行的问题列表。

创建 PR 清单

分支仓库
添加新功能或修复问题，并将其推送到您的分支
启动演示和演示-ng 应用程序，确保它们正常运行（确保在 iOS 和 Android 上都不会抛出控制台错误）
从您的分支创建一个 PR，针对此存储库的 'master' 分支

感谢您的贡献。

NativeScript Image Swipe 小部件

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

截图

Screenshot

安装

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

tns 插件添加 nativescript-image-swipe

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

配置

无需其他配置！

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

Donate