如何在 React 中創建類似 Tinder 的卡片堆滑動器？

Question

我想創建一個刷卡器，我已經嘗試了幾個包，但它們都不夠體面和可定制，所以我考慮自己創建一些東西。

go 我應該用什么方法來創建動畫、可拖動卡片和一堆卡片（每次滑動時都應該在底部添加一張新卡片）？

Answer 1

這是一個粗略的想法，但它可能會奏效。

我建議創建一個CardComponent並將它們堆疊在一起，最后一個在底部。

return (
   <div className="card-container">
       {
            this.state.cards.map((card, index)=>{
                 return (<CardComponent key={card.id} details={card}></CardComponent>)
            })
       }
   </div>

)

類似的東西。

然后在 CSS 部分，將.card-container設置為持有者，然后使用CardComponent的元素順序，這將返回<div>stuff here</div> 。

然后將.CardComponent > div設置為絕對定位，然后利用z-index屬性。

每當您想要移除第一張卡片並將新卡片附加到末尾（在卡片堆棧的底部）時，請使用此代碼。

var count = 0;
// Reverse the array, so you can order from bottom to front
$('.card-container > div').reverse().each(
    function() {
        $(this).css('z-index', ++count);
    }
);

然后您可以更新卡片狀態。

let newCardList = this.state.slice(1);
let newCard = null; // Add the new card here
newCardList.append(newCard);
this.setState({
    ...this.state,
     cards: newCardList
})

所以在 CardComponent 上的 swipe 事件中，只需從事件中獲取 key，使用 jQuery 播放幻燈片動畫，動畫結束后，只需像上面的代碼一樣對卡片數組進行切片。

此外，您還需要在切片后調用它，並添加一張新卡。

$('.card-container > div').reverse().each(

Answer 2

你可以通過以下方式做這些事情： https://github.com/react-voodoo/react-voodoo

這里有一個類似火種的迷你應用程序的演示示例： https://codesandbox.io/s/tinder-like-card-swiper-1735w

Answer 3

我假設您主要為計算機用戶開發網絡瀏覽器應用程序。

• 對於動畫，您可以在幾幀中分解移動，
• 如果您找不到任何現有的東西，您可以使用自定義事件功能進行滑動，
• 卡片堆棧是一種簡單的狀態管理，我建議使用鈎子。