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

nativescript-swipe-card

Swipe Card plugin for nativescript
授权协议 View license
开发语言 JavaScript TypeScript
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 东门晨
操作系统 iOS
开源组织
适用人群 未知
 软件概览

NPM

Nativescript Swipe Card plugin

This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe

Nativescript-swipe-card

Tender cards, allow you to drag them, and detect swipe events.

Developed with ❤️ by the team NativeBaguette ��

To know more about the {N} ambassador's program, you can check this video, or read this article.

Installation

tns plugin add nativescript-swipe-card

Usage

Typescript NativeScript

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:customControls="nativescript-swipe-card"
      loaded="pageLoaded" class="page">
    <StackLayout>
        <customControls:SwipeCard id="swipe" 
                                  height="90%"
                                  width="80%" 
                                  items="{{ stackCards }}" 
                                  cardHeight="60" 
                                  cardWidth="70"
                                  isRandomColor="1"
                                  cardBorderRadius="20"
                                  cardBorderWidth="2"
                                  />
  </StackLayout>
</Page>

main-page

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import {HelloWorldModel} from './main-view-model';
import {SwipeEvent} from 'nativescript-swipe-card';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    // Get the event sender
    let page = <pages.Page>args.object;
    page.bindingContext = new HelloWorldModel();
    let swipeCard = page.getViewById("swipe");
    swipeCard.on("swipeEvent", (args:SwipeEvent) => {
        if (args.direction === 1) {
                    //right
                    console.log('Swiped to right');
        } else {
                    //left
                    console.log('Swiped to left');
        }
    });
}

main-view-model

import {Observable} from 'tns-core-modules/data/observable';
import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";

export class HelloWorldModel extends Observable {
  public stackCards:Layout[];

  constructor() {
    super();

    let Grid = new GridLayout();
    let Label1 = new Label();
    let Label2 = new Label();
    Label1.text = "The Swipable Card plugin";
    Label1.textWrap=true;
    Label2.text = "Welcome to {N} we present you";
    Label2.textWrap=true;
    Grid.addChild(Label1);
    Grid.addChild(Label2);
    // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
    var firstRow = new ItemSpec(1, "auto");
    var secondRow = new ItemSpec(1, "auto");
    Grid.addRow(firstRow);
    Grid.addRow(secondRow);
    GridLayout.setRow(Label1,0);
    GridLayout.setRow(Label2,1);


    let stack2 = new StackLayout();
    let image = new Image();
    image.src="~/images/apple.jpg"
    image.height=100;
    image.width=100;
    stack2.verticalAlignment = "middle";
    stack2.addChild(image);
    

    let stack3 = new StackLayout();
    let button = new Button();
    button.text="Click me!";
    button.width=100;
    button.textAlignment = "center";
    stack3.verticalAlignment = "middle";
    stack3.addChild(button);
    this.stackCards = [stack3,stack2,Grid];
  }
  
}

Fun fact! Team Time-Travel (Luna Kang, Stefan Medjo and mentor Jen Looper used the plugin to complete their 'Fetching' app - a Tinder app for dogs that uses the Petfinder API to help dogs to find puppy playdates in their area!https://github.com/jlooper/fetching-app-vanilla

Angular NativeScript

XML

<SwipeCard  height="75%"
                    width="100%" 
                    [items]="stackCards"
                    (swipeEvent)="swipeEvent($event)"
                    cardHeight="50" 
                    cardWidth="80"
                    isRandomColor="1"
                    cardBorderRadius="15"
                    cardBorderWidth="1">
        </SwipeCard>

Component

elementRegistryModule.registerElement("SwipeCard", () => require("nativescript-swipe-card").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";
import * as elementRegistryModule from 'nativescript-angular/element-registry';

@Component({
    moduleId: module.id,
    templateUrl: "helloworld.html"
})
export class helloworldComponent {

  public stackCards:Array<Layout>=[];
  
  constructor(swipeEvent: SwipeEvent) {
    let Grid = new GridLayout();
    let Label1 = new Label();
    let Label2 = new Label();
    Label1.text = "The Swipable Card plugin";
    Label1.textWrap=true;
    Label2.text = "Welcome to {N} we present you";
    Label2.textWrap=true;
    Grid.addChild(Label1);
    Grid.addChild(Label2);
    // Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
    var firstRow = new ItemSpec(1, "auto");
    var secondRow = new ItemSpec(1, "auto");
    Grid.addRow(firstRow);
    Grid.addRow(secondRow);
    GridLayout.setRow(Label1,0);
    GridLayout.setRow(Label2,1);

    let stack2 = new StackLayout();
    let image = new Image();
    image.src="~/images/apple.jpg"
    image.height=100;
    image.width=100;
    stack2.verticalAlignment = "middle";
    stack2.addChild(image);

    let stack3 = new StackLayout();
    let button = new Button();
    button.text="Click me!";
    button.width=100;
    button.textAlignment = "center";
    stack3.verticalAlignment = "middle";
    stack3.addChild(button);
    this.stackCards = [stack3,stack2,Grid];
  }
  swipeEvent(args:SwipeEvent) {
        if (args.direction === 1) {
                    //right
                    console.log('Swiped to right');
        } else {
                    //left
                    console.log('Swiped to left');
        }
  };   
}

PS: I used this plugin in other application built in Angular, you can check it here:https://github.com/rkhayyat/SyrianForumFrance

API

Properties

Property Type Default Description
swipeEvent function SwipeEvent Callback called when the layout is swiped to the right or left and the swipe animation is done. Return args:SwipeEvent:
1- direction (1 if right/2 if left),
2- cardIndex contain the card index

Methods

Method Return Description
items Array<Layout> Array of card's layout, in which we can define the content of each card.
cardHeight (optional) number Card's height in percentage of their container's height.
cardWidth (optional) number Card's width in percentage of their container's width.
cardBorderRadius (optional) number Card's border radius.
cardBorderWidth (optional) number Card's border's width.
isRandomColor (optional) number 1: Set card's colors randomly & automatically.
2: Set card's colors manually.
Default is 1.

NativeBaguette ��

Jean-Baptiste Aniel Rachid Al Kayat triniwiz BradMartin JenLooper
rhanb rkhayyat triniwiz bradmartin jlooper
 相关资料
  • Nativescript-swipe-layout Simple swipeable layout, which allow you to drag it, detect swipe events, and perform swipe animations. Developed with ❤️ by the team NativeBaguette �� Installation tns plugi

  • 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 Th

  • 轮播图,可自定义轮播时间间隔、动画时长等。 引入 import { Swipe, SwipeItem } from 'mint-ui'; Vue.component(Swipe.name, Swipe); Vue.component(SwipeItem.name, SwipeItem); 例子 基础用法 <mt-swipe :auto="4000"> <mt-swipe-item>1</m

  • 滑动功能适用于移动设备。 以下指令用于处理滑动。 md-swipe-down ,Angular指令用于指定向下滑动元素时的自定义行为。 md-swipe-left ,Angular指令用于指定向左滑动元素时的自定义行为。 md-swipe-right ,Angular指令用于指定向右滑动元素时的自定义行为。 md-swipe-up ,Angular指令用于指定元素被刷新时的自定义行为。 例子 (E

  • Swipe 是一种针对特定领域的声明式语言,供非开发人员(如设计师、动画师、插画师、音乐家、摄像师和漫画家)创建包含照片、视频、图像、矢量图形、动画、声音、音乐和音效的富媒体/动画文档,这些文档将在智能手机、平板电脑和支持触摸的机顶盒(如iPhone和Apple TV)等触摸设备上使用。

  • 可滑动的单元格,用法同 cell。 引入 import { CellSwipe } from 'mint-ui'; Vue.component(CellSwipe.name, CellSwipe); 例子 增加右滑动按钮 <mt-cell-swipe title="标题文字" :right="[ { content: 'Delete', style: {