一个 NativeScript 控件，允许您轻松滑动和缩放图片列表。

屏幕截图

安装

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

tns plugin add nativescript-image-swipe

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

配置

无需额外配置！

API

事件

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

静态属性

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

实例属性

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

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

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

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

• imageUrlProperty - 字符串
  获取或设置定义从何处加载图片的 URL 的 items 对象中的属性。

• allowZoom - 布尔值（默认：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}.`);
    }
}

与 Webpack+Uglify 一起使用

如果您正在使用 webpack 并且正在缩小/压缩代码，则有一些特定的名称应从缩小中排除，以便控件正常工作。ImageSwipe 控件导出这些名称，您需要将它们添加到 webpack.common.js 文件中的 uglifyjs 插件的 mangle exclude 选项中。

var imageSwipeMangleExcludes = require("nativescript-image-swipe/uglify-mangle-excludes").default;
//......
module.exports = function (platform, destinationApp) {
    //......
    if (process.env.npm_config_uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({
            minimize: true
        }));

        //Work around an Android issue by setting compress = false
        var compress = platform !== "android";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: nsWebpack.uglifyMangleExcludes.concat(imageSwipeMangleExcludes),
            },
            compress: compress,
        }));
    }
   //......
}

演示

此存储库包含 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