Swing 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00811/article/details/142777020

Swing 开源项目教程

swing A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder. 项目地址: https://gitcode.com/gh_mirrors/sw/swing

1. 项目介绍

Swing 是一个用于实现可滑动卡片界面的开源项目，支持左右滑动选择（如在应用 Jelly 和 Tinder 中看到的）。该项目提供了一个简单易用的 API，使得开发者可以轻松地在移动应用中实现类似 Tinder 的卡片滑动效果。Swing 不仅支持基本的卡片滑动功能，还提供了丰富的配置选项和事件监听器，以满足不同应用场景的需求。

2. 项目快速启动

安装

首先，你需要在你的项目中安装 Swing：

npm install swing

快速启动代码示例

以下是一个简单的示例，展示如何使用 Swing 创建一个可滑动的卡片堆栈：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swing Example</title>
    <style>
        .card {
            width: 300px;
            height: 400px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 20px auto;
            text-align: center;
            line-height: 400px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="card">Card 1</li>
        <li class="card">Card 2</li>
        <li class="card">Card 3</li>
    </ul>

    <script src="node_modules/swing/dist/swing.js"></script>
    <script>
        // 准备卡片堆栈
        const cards = Array.prototype.slice.call(document.querySelectorAll('ul li'));
        const stack = Swing.Stack();

        cards.forEach((targetElement) => {
            // 将卡片元素添加到堆栈中
            stack.createCard(targetElement);
        });

        // 添加事件监听器，当卡片被抛出堆栈时触发
        stack.on('throwout', (event) => {
            console.log('卡片已被抛出堆栈');
            console.log('抛出方向: ' + (event.throwDirection == Swing.Direction.LEFT ? '左' : '右'));
        });

        // 添加事件监听器，当卡片被抛回堆栈时触发
        stack.on('throwin', () => {
            console.log('卡片已弹回堆栈');
        });
    </script>
</body>
</html>