Nativescript Swipe Card 插件

本插件灵感来源于 https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe

Nativescript-swipe-card

可滑动卡片，允许你拖动它们，并检测滑动事件。

由 NativeBaguette 🥖 团队用 :heart: 开发

想了解更多关于 {N} 使者计划的信息，您可以查看此 视频，或阅读此 文章。

安装

tns plugin add nativescript-swipe-card

用法

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];
  }
  
}

有趣的事实！团队 Time-Travel（Luna Kang、Stefan Medjo 和导师 Jen Looper）使用了此插件来完成他们的 'Fetching' 应用 - 一款使用 Petfinder API 的狗 Tinder 应用，帮助狗狗在本地区找到小狗聚会！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> 

组件

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';
elementRegistryModule.registerElement("SwipeCard", () => require("nativescript-swipe-card").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
@Component({
    moduleId: module.id,
    templateUrl: "helloworld.html"
})
export class helloworldComponent {

  public stackCards:Array<Layout>=[];
  
  constructor() {
    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：我在其他基于 Angular 构建的应用中使用了此插件，您可以在以下链接中查看：https://github.com/rkhayyat/SyrianForumFrance

API

属性

方法

NativeBaguette 🥖

rhanb	rkhayyat	triniwiz	bradmartin	jlooper