当前位置: 首页 > 软件库 > 手机/移动开发 > >

nativescript-image-swipe

授权协议 Apache-2.0 License
开发语言 JavaScript TypeScript
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 郎意
操作系统 iOS
开源组织
适用人群 未知
 软件概览

The author of this plugin will continue to support it in a separate repo exclusively as part of ProPlugins. This repo will remain supported by the NativeScript community.

Contribution - help wanted

This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

Creating a PR checklist:

  • Fork the repo
  • Add new functionality or fix an issue and push it to your fork
  • Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android)
  • From your fork create a PR targeting the 'master' branch of this repository

Thank you for your contribution.

NativeScript Image Swipe widget

A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

Screenshot

Screenshot

Installation

Run the following command from the root of your project:

tns plugin add nativescript-image-swipe

This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

Configuration

There is no additional configuration needed!

API

Events

  • pageChanged
    Triggered when the user swipes to the next/previous image in the list.

Static Properties

  • pageChangedEvent - String
    String value used when hooking to pageChanged event.

Instance Properties

  • ios - UIScrollView
    Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

  • android - android.support.v4.view.ViewPager
    Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

  • items - Array | ObservableArray
    Gets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.

  • pageNumber - Number
    Gets or sets the currently visible image.

  • imageUrlProperty - string
    Gets or sets the property inside the items' object that defines the Url from where to load the images

  • allowZoom - boolean (default: true)
    Gets or sets whether zoom is enabled

Usage

You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

<!-- 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}.`);
}

Usage in Angular

In order to use the ImageSwipe you must register it in BOTH your main.ts and 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}.`);
    }
}

Demos

This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

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

This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

Donate

bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

Donate

 相关资料
  • NativeScript Image Colors Example import { ImageColors } from 'nativescript-image-colors';let image = page.getViewById<Image>(`image`);colors = ImageColors.getColorPalette(image);colors.color1;colors

  • Nativescript Image Cache Nativescript image caching plugin using Fresco for Android and SDWebImageCache for iOS Installation tns plugin add nativescript-image-cache Support NativeScript ~3.0.0 with An

  • NativeScript-Image-Filters Nativescript plugin for native image filters. Sample Installation From your command prompt/termial go to your app's root folder and execute: NativeScript Version 7+:tns plug

  • 描述 图片展示组件,类似于 HTML image 标签,但提供了更丰富的功能,使用时需指定样式宽高值。 安装 $ npm install rax-image --save 属性 属性 类型 默认值 必填 描述 支持 source Object: {uri: String} - ✔️ 设置图片的 uri style Object: { width: Number height: Number } -

  • 图片操作. 支持 安装 $ npm install universal-image --save 方法 choose(options) 拍照或从本地相册中选择图片。 参数 属性 类型 默认值 必选 描述 支持 count Number 1 x 最大可选照片数 sizeType String Array ['original', 'compressed'] x original 原图,compres

  • 简介 <image> 用于在界面中显示单个图片。 TIP 在代码中请使用 <image> 标签, <img> 的存在只是因为兼容性原因,在将来的版本中可能删除。 Weex 没有内置的图片库,因为一些开源项目如 SDWebImage 和Picasso已经能很好的解决这个问题, 所以在使用 <image> 之前,请在 native 侧先接入相应的 adapter 或者 handler。参见: Andr