介绍
ng2-swipe-cards-reversed 是一个基于 Angular2+ 的 UI 插件，可以快速创建左右滑动的卡片界面。相较于其它同类插件，ng2-swipe-cards-reversed 反转了卡片的排列方式，使得卡片是从右向左轮流进入。这篇文章将详细介绍如何使用该插件。
安装
在你的 Angular2+ 项目的终端中执行下面的命令进行安装：
npm install ng2-swipe-cards-reversed --save
使用
在你的模块中导入 ng2-swipe-cards-reversed 模块：
-- -------------------- ---- -------
------ - --------------------------- - ---- ---------------------------
-----------
-------- -
---------------------------
--
------------- -
------------
--
---------- - ------------ -
--
------ ----- --------- - -在你的组件中使用 ng2-swipe-cards-reversed 组件：
<ng2-swipe-cards-reversed [cards]="cardArray"> <!-- Content projection should be added here --> <card-template let-card="card"></card-template> </ng2-swipe-cards-reversed>
其中，cardArray 是卡片列表数组，card-template 是单个卡片的内容模板。
选项
ng2-swipe-cards-reversed 有多种选项可以自定义，具体如下：
cardRemoved是在卡片被删除时的回调函数。animateOpacity是卡片在移动过程中是否使用透明动画。animateCard是卡片在移动过程中是否使用卡片转动动画。likeSkipLabel是对于想要跳过或者喜欢的卡片，左右滑动的图标。
编写卡片模板
你需要编写一个 card-template 模板来渲染单个卡片。 在模板中，你可以自定义卡片的样式和内容，例子如下：
-- -------------------- ---- -------
-------------- ----------------
---- -------------
---- ------------
---- -----------------
------
---- -------------
----------------------
---------------------------
------
------
---------------- 示例
下面是一个简单的示例，可以让你更好地了解 ng2-swipe-cards-reversed 的使用：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------
--------- -
------------------------- --------------------
-------------- ----------------
---- -------------
---- ------------
---- -----------------
------
---- -------------
----------------------
---------------------------
------
------
----------------
---------------------------
-
--
------ ----- ------------ -
------ ---------- ---------- - -
-
---- ---------------------------------------------------------------------
----- ------
------------ -- ------ ----
--
-
---- -----------------------------------------------------------------------------------------------------------
----- -------- -----
------------ -------- ------ ----
--
-
---- -------------------------------------------------------------------------
----- ------ -----
------------ ----- --- ----- --- -- ---- ------
-
--
-总结
以上便是 npm 包 ng2-swipe-cards-reversed 的使用教程，通过学习，你可以快速创建带有左右滑动效果的卡片页面。同时，该插件也有多种自定义选项和模板，你可以参考我的例子进行定制化。希望这篇文章能帮助你更好地应用 ng2-swipe-cards-reversed。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6d04