如何实现React中Tinder式3D堆叠卡片的层叠显示与滑动切换

我需要实现类似Tinder的滑动卡片机制：所有用户信息卡片完全重叠固定在同一位置，仅显示最上方的卡片，滑动顶部卡片后下方卡片自动补位显示。

目前使用react-tinder-card库实现滑动逻辑，但遇到两个核心问题：

1. 默认渲染的卡片是纵向2D排列，滑动顶部卡片后，下方所有卡片需要等待约3秒才会上移，交互体验差；
2. 尝试将父元素设为position: relative、子卡片设为position: absolute后，虽然实现了卡片重叠，但卡片顺序颠倒，且可读性不佳。

效果说明：

• 初始状态：卡片纵向依次排列，最上方是第一张用户卡片
• 滑动中：顶部卡片被拖离屏幕，下方卡片仍在原位置
• 滑动后：等待3秒左右，下方所有卡片才会整体上移

现有代码 #

export const SwipeCard = () => {

    //array of compatible users fetched for a user.
    const [users, setUsers] = useState([]);
    const [lastDirection, setLastDirection] = useState()
    const [isLoading, setLoading] = React.useState(true);
    
    useEffect(() => {
        getUsers().then(() => {
            setLoading(false);
        });
    }, []);

    const swiped = (direction, nameToDelete) => {
        console.log('removing: ' + nameToDelete)
        setLastDirection(direction)
    }

    const outOfFrame = (firstName) => {
        console.log(firstName + ' left the screen!')
    }

    const getUsers = async () => {
        //Currently hardcoded value until authorisation implemented.
        const userId = 7;
        
        const response = await UserService.getUsers(userId)
            .then(response => response.json())
            .then(data => {
                for(let i = 0; i < data.length; i++){
                    users[i] = data[i];
                }
            });
    }

    if (isLoading) {
        return (
            <div/>
        )
    }

    return (
        <div>
            <div id='tinderCards'>
                {lastDirection ? <h2 className='text'>You swiped {lastDirection}</h2> : <h2 className='text' />}
            {users.map((user) =>
                <TinderCard className='swipeCard' key={user.firstName} onSwipe={(dir) => swiped(dir, user.firstName)} onCardLeftScreen={() => outOfFrame(user.firstName)}>
                    <div className='card'>
                        <img id='profileImg' src={config.URL + '/users/' + user.userID + '/image/download'} />
                        <h2>{user.firstName} {user.lastName}</h2>
                    </div>
                </TinderCard>
            )}
        </div>
    </div>
  )
}

解决思路 #

1. 修正绝对定位下的卡片顺序问题 #

当使用绝对定位让卡片重叠时，React按数组顺序从前到后渲染，后面的卡片会覆盖前面的。只需反转users数组的渲染顺序，让最后一个用户卡片先渲染在最底层，第一个用户卡片最后渲染在最顶层：

{[...users].reverse().map((user) => 
  <TinderCard ...>...</TinderCard>
)}

同时给父容器设置相对定位和固定高度（匹配单张卡片高度），避免容器塌陷：

#tinderCards {
  position: relative;
  height: 600px; /* 与你的.card高度保持一致 */
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}

.swipeCard {
  position: absolute;
  width: 100%;
}

2. 优化滑动后的即时补位逻辑 #

react-tinder-card默认会等待动画完全结束后才移除DOM节点，导致下方卡片延迟上移。可以利用onCardLeftScreen回调实时移除已滑出的卡片：

• 修改outOfFrame函数，直接从状态数组中删除对应用户：

const outOfFrame = (userId) => {
  setUsers(prevUsers => prevUsers.filter(user => user.userID !== userId));
}

• 渲染时改用user.userID作为key（避免重名用户的key冲突）：

<TinderCard key={user.userID} onCardLeftScreen={() => outOfFrame(user.userID)} ...>...</TinderCard>

3. 增强卡片堆叠的视觉层次感 #

给非顶层卡片添加轻微缩放和透明度，模拟Tinder的堆叠效果：

.swipeCard:nth-child(n+2) {
  transform: scale(0.98);
  opacity: 0.9;
}

4. 修复状态更新的错误写法 #

当前getUsers函数直接修改原数组，不符合React状态更新规范，会导致状态不生效，改为直接设置新数组：

const getUsers = async () => {
  const userId = 7;
  const response = await UserService.getUsers(userId);
  const data = await response.json();
  setUsers(data);
}

内容的提问来源于stack exchange，提问作者devo9191