Блог

Главная - Вопросы по программированию - Как создать функциональные карточки в стиле tinder в React.js (Песочница в описании)?

Как создать функциональные карточки в стиле tinder в React.js (Песочница в описании)?

#javascript #html #reactjs #npm #tinder

#javascript #HTML #reactjs #npm #tinder

Вопрос:

В настоящее время я использую библиотеку под названием react-swing (https://www.npmjs.com/package/react-swing ), основанные на библиотеке Swing(https://github.com/gajus/swing). Обе библиотеки позволяют создавать карточки tinder с возможностью прокрутки. в настоящее время я могу удалять компоненты, а консоль регистрирует направление прокрутки, но я изо всех сил пытаюсь понять, как реализовать функцию при прокрутке. В идеале, я бы хотел, чтобы карта, которая была перемещена, была помещена в конец «пакета», чтобы вы могли снова просматривать их, но я борюсь с этой функциональностью, есть предложения?

Код:

 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

Комментарии:

1. не могли бы вы создать песочницу?

2. можете попробовать, у меня не слишком большой опыт работы на этом сайте, я попробую.

3. Я настраиваю один банкомат

4. codesandbox.io/s/sleepy-sunset-jqjst?file=/webApps_data.js песочница запущена, ваша помощь была бы высоко оценена

Ответ №1:

Я нашел способ повторно ввести элемент с возможностью прокрутки с помощью translate(0, 0) rotate(0) , но я не знаю, как вызвать это при обнаружении обновления салфетки: не могу использовать это, так как при повторной попытке провести элемент, он исчезает и ломается

Ответ №2:

Я не знаю о react-swing, но это можно сделать с помощью react-voodoo.

Вот пример реализации прокрутки карты с помощью codesandbox :

https://react-voodoo.github.io/react-voodoo-samples/

Добавление некоторого обновления zIndex и анимации может помочь

react-swing, похоже, делает это жестко синхронизированным с css способом; изменение анимации, вероятно, потребует от вас разветвления всей библиотеки.

Также это, вероятно, можно сделать с нуля с помощью react-spring