npm 包 ng2-swipe-cards-reversed 使用教程

介绍

ng2-swipe-cards-reversed 是一个基于 Angular2+ 的 UI 插件，可以快速创建左右滑动的卡片界面。相较于其它同类插件，ng2-swipe-cards-reversed 反转了卡片的排列方式，使得卡片是从右向左轮流进入。这篇文章将详细介绍如何使用该插件。

安装

在你的 Angular2+ 项目的终端中执行下面的命令进行安装：

--- ------- ------------------------ ------

使用

在你的模块中导入 ng2-swipe-cards-reversed 模块：

------ - --------------------------- - ---- ---------------------------

-----------
    -------- -
        ---------------------------
    --
    ------------- -
        ------------
    --
    ---------- - ------------ -
--
------ ----- --------- - -

在你的组件中使用 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

阅读全文

猜你喜欢

  • npm 包 @etpinard/gl-text 使用教程

    在前端开发中，我们经常需要在页面上展示文本，而有时候纯粹的 html 标签并不能满足我们的需求，此时使用 @etpinard/gl-text 可以轻松实现文本的各种效果展示。

    3 年前
  • npm包 nanobox-db 使用教程

    在编写 Web 应用程序时，数据库是核心组成部分之一。Nanobox-db是一种数据库连接库，类似于Mongoose或Sequelize。这个库基于Node.js开发，使Node.js程序员的工作更加...

    3 年前
  • npm 包 pull-promise-map-done 使用教程

    什么是 pull-promise-map-done？ pull-promise-map-done 是一个 npm 包，它提供了一种将 pull-stream 与 Promise 和 map() 结合使...

    3 年前
  • npm 包 rpscript-api-telegram-bot 使用教程

    前言 在前端开发领域，有很多常用的 npm 包，它们可以简化我们的编程工作，提高开发效率。今天，我要介绍的是 rpscript-api-telegram-bot 这个 npm 包，它是用于开发 tel...

    3 年前
  • npm 包 babel-plugin-module-resolver-no-logs 使用教程

    在前端开发过程中，我们经常需要引用其他 JavaScript 模块，其中一个常见的问题是路径会变的非常长，很难维护。为了解决这个问题，npm 包 babel-plugin-module-resolve...

    3 年前
  • npm 包 ecmaless-tokenizer 使用教程

    引言 在前端领域，我们经常需要将源代码转换成可执行代码。而这个过程中，经常需要解析代码中的每一个标记（Token）。为了方便地实现这个过程，我们可以使用 npm 包 ecmaless-tokenize...

    3 年前
  • npm 包 @damankj/react-pdf 使用教程

    随着前端技术的发展，越来越多的网站需要使用 PDF 文件来显示和下载。为了方便开发者使用 PDF 文件，出现了许多 PDF 相关的 npm 包。那么今天我们介绍的就是其中一个：@damankj/rea...

    3 年前
  • npm 包 hash-str 使用教程

    概述 npm 是前端开发者无法回避的日常工具之一，而 hash-str 这个 npm 包则是常常用来生成哈希值的工具。它可以将一个字符串转换为一个具有唯一性的哈希值字符串，这在前端开发中有着广泛的应用...

    3 年前
  • npm 包 token-swap-dapp 使用教程

    在以太坊生态系统中，交换代币是一项基本的操作，对于前端开发者而言使用一个好用的 DApp 库无疑能够事半功倍，而 token-swap-dapp 就是一个非常优秀的 DApp 库。

    3 年前
  • npm 包 @anilanar/moxios 使用教程

    在前端开发中，我们需要进行各种测试，而测试的一个重要组成部分就是模拟 API 请求。而 npm 包 @anilanar/moxios 就是一个方便的 API 请求库，它可以用来模拟 HTTP 请求，使...

    3 年前
  • npm 包 eslint-config-grain 使用教程

    在前端开发中，代码质量的提高是一个非常重要的问题，而 eslint 是一款非常优秀的代码质量检查工具，它可以帮助我们发现代码中存在的问题，并给出解决方案。使用 eslint 可以保证我们的代码符合一定...

    3 年前
  • npm 包 generator-refresh 使用教程

    1. 什么是 generator-refresh generator-refresh 是一个 npm 包，它可以生成一个空白的后端 API 项目或一个前端项目。它使用了 yeoman generato...

    3 年前
  • npm 包 poio 使用教程

    随着前端技术的不断发展，许多优秀的 npm 包也应运而生。其中，poio 是一款可用于简化前端开发过程中的操作的 npm 包。那么，本教程将整理 poio 的使用方法，帮助初学者快速学习并使用它。

    3 年前
  • npm 包 aframe-simple-link-component 使用教程

    介绍 aframe-simple-link-component 是 aframe 的一个 npm 包，用于在 VR 场景中添加链接来实现导航的功能。通过 aframe-simple-link-comp...

    3 年前
  • npm 包 node-red-contrib-rtc-alert-node 使用教程

    Node-RED 是一个流程编排工具，它基于 Node.js 平台，使用了 Web 技术构建了一个轻量级的流程编排框架。它可以用于 IoT 物联网中的设备管理、数据处理等，也可以用于 Web 开发中的...

    3 年前
  • npm 包 hypo-container 使用教程

    概述 在前端开发过程中，容器化技术被越来越广泛地应用。npm 包 hypo-container 是一款轻量级容器化解决方案，它提供了一个快速启动和运行容器的方法。本文将详细介绍如何使用 hypo-co...

    3 年前
  • npm 包 vue-cli-plugin-vuetify-electron 使用教程

    随着 Web 技术的不断发展，电子化应用已成为各行业的必备因素。在这种背景下，Electron 出现了。它是一种基于 Node.js 和 Chromium 的跨平台框架，可用于编写桌面应用程序。

    3 年前
  • npm 包 herm-js-network 使用教程

    简介 在前端开发中，网络请求是不可避免的。而npm 包 herm-js-network 是一个JavaScript网络请求库，它能让我们在前端开发中进行API请求，并在HTTP请求过程中自动检测HTT...

    3 年前
  • npm 包 huge-uploader-nodejs 使用教程

    简介 huge-uploader-nodejs 是一个基于 Node.js 的大文件上传组件。它可以在服务器端将大文件上传分成多个小块进行上传，以减轻服务器负担。同时，该组件还支持上传进度实时反馈、断...

    3 年前
  • npm 包 react-native-offline-api 使用教程

    在移动应用开发中，离线应用是非常必要的功能。对于 React Native 应用来说，react-native-offline-api 是一个非常好用的 npm 包，可以方便地实现离线应用。

    3 年前

相关推荐

    暂无文章