时间戳

首页 > 解决方案 > 如何在 React.js（描述中的沙盒）中制作功能性的火种风格卡片？

javascript - 如何在 React.js（描述中的沙盒）中制作功能性的火种风格卡片？

问题描述

目前，我正在使用一个名为 react-swing 的库（https://www.npmjs.com/package/react-swing），它基于库 Swing（https://github.com/gajus/swing）。这两个库都允许您创建可刷卡的火种卡。目前我可以刷掉组件并控制台记录刷卡的方向，但我很难理解如何在刷卡时实现功能。理想情况下，我希望将已刷卡的卡放在“包装”的背面，这样您就可以再次循环浏览它们，但我正在为这个功能而苦苦挣扎，有什么建议吗？

代码：

function Webapps() {
import React, { useRef, useState, useEffect } from 'react';
import Data from '../Data/webApps_data';
import ReactSwing from '../../node_modules/react-swing/dist/react-swing.js';

    const projectStack = useRef();


    return (
        <div className='webAppStyles'>
            <ReactSwing className="stack" ref={projectStack} throwout={(e) => console.log('throwout', e)}>
                {Data.map((Projects, index) => {
                    return <div>{Projects.workName}</div>
                })}
            </ReactSwing>
        </div >
    )
}

沙箱（根据要求我设置了一个沙箱希望有人可以帮助我！）： https ://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js

标签： javascripthtmlreactjsnpmtinder

解决方案

我找到了一种使用 重新定位可滑动元素的方法translate(0, 0) rotate(0)，但我不知道如何在检测到滑动时触发此更新：不能使用此方法，因为当您再次尝试滑动元素时，它会消失并损坏

推荐阅读