NativeScript Card Stack View

一个类似于 Tinder 的卡片堆叠视图组件，支持 NativeScript iOS 和 Android，并支持 Angular。

平台	支持	NativeView
iOS	是	MDCSwipeToChoose
Android	是	CardStackView

演示屏幕截图

iOS	Android

警告

此插件仍在开发中。所有关键功能都应该工作，但在部署到生产环境之前请彻底测试并报告任何问题。

Angular 演示已正确设置。核心应该工作，但演示非常基础。

安装

在项目的根目录中运行 tns plugin add nativescript-card-stack-view。您必须在添加具有本地依赖关系的插件后清理项目。这可以通过执行 tns platform remove android（或 ios）然后 tns platform add android（或 ios）来完成。NS CLI 的新版本提供了一个 clean 命令，如果您喜欢此选项，则可以在一个脚本中执行此操作。

用法

对于任何实现，请确保使用 ObservableArray<Observable> 对于项目。您可以向数组中添加并显示卡片，但任何其他数组操作可能会导致问题。如果您有特定的案例，请写入一个问题。

核心

确保在页面元素上包含命名空间

xmlns:ns="nativescript-card-stack-view"

<ns:CardStack id="cardStack" height="100%" width="100%" color="white" dragging="onDrag" swiped="onSwiped" items="{{ myDataArray }}">
    <ns:CardStack.itemTemplate>
        <ns:CardStackItem backgroundColor="#ff0000" verticalAlignment="middle" margin="15" borderRadius="6">
            <GridLayout>
                <Image src="{{image}}" stretch="aspectFill" height="100%" width="100%"  borderRadius="6"/>
                <Label text="{{title}}" horizontalAlignment="center" backgroundColor="#50000000" height="30" />
                <Label text="WOW" horizontalAlignment="center" backgroundColor="#50000000" height="30" marginTop="50" />
            </GridLayout>
        </ns:CardStackItem>
    </ns:CardStack.itemTemplate>

</ns:CardStack>

Angular

导入模块

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    ...,
    CardStackModule // Import the module!
  ],
  declarations: [AppComponent],
  ...
})

创建布局

<CardStack #cardStack
           [items]="items"
           (swiped)="onSwiped($event)"
           (dragging)="onDrag($event)"
           (canceled)="onDragCancel($event)"
           (loaded)="onStackLoaded($event)"
           [options]="cardStackOptions">

  <ng-template let-i="index" let-item="item">
    <!-- Your template here -->
  </ng-template>
</CardStack>

事件

事件	描述
swiped	当卡片滑动时触发，并返回方向和位置
dragging	当发生拖动时触发
canceled	当卡片滑动取消时触发，并返回卡片在数组中的位置
loaded	当 `CardStack` 加载时触发并返回实例

属性

名称	描述
selectedIndex	当前前卡索引

DragEvent event.object

{
  side :string; // `"Left"`,`"Right"` 
  ratio: number; // 0-1 ratio of center to right or left edge  
}

SwipedEvent event.object

{
  direction :string; // `"Left"`,`"Right"` 
  position: number; // index of the swiped card
}

属性 - 通用

items（必须与 itemTemplate 或 ng-template 一起使用，请参阅演示）
options 可选

{
  visibleCount: number; // how many cards should be visible in the stack
}

将数据数组分配给生成幻灯片并应用绑定上下文。如果 items 已填充，则必须使用模板选项。

更新日志

0.0.2

添加了许可证

0.0.1

初始版本

作者

FranciZ

资源

使用 nativescript-carousel 插件作为框架。

从以下内容学习

帮助

我将接受改进此项目的拉取请求并分配信用。