javascript - 如何使用 react-swipe-card 在 React 中构建可堆叠的卡片?

标签 javascript reactjs react-swipeable-views

我正在寻找使用可堆叠卡片构建用户界面,例如:

enter image description here

如果有动态数量的卡片是当前事件的卡片,并且随着顶部卡片的消失,将显示下面的卡片。非常类似于 Tinder 的可滑动体验。

我需要在我的 React 网络应用程序(不是 native )中构建这个 UI 组件。我发现这个库看起来很受欢迎:

https://github.com/oliviertassinari/react-swipeable-views

然而,这个库似乎不支持堆叠 View ,并以如下所示的偏移量显示所有 View 。

有谁知道是否有可能通过 react-swipeable-views 完成我正在寻找的东西,或者是否有更好的库来完成图像中看到的 UIC?

最佳答案

您可以使用 react-spring库来实现这一点。 Here是实现该行为的一个示例。

我希望它对你有帮助!

关于javascript - 如何使用 react-swipe-card 在 React 中构建可堆叠的卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51070028/

相关文章:

javascript - 如何让 HTML 文本框在空时显示提示?

javascript - 无法从 Firebase 读取 JSON 值

javascript - 无法使用react和redux在组件中显示数据

javascript - React Chartist 组件 onTouchMove 事件未触发

reactjs - Swiper Slider Effect 在 React Js 中不起作用

javascript - 将 JSON 数组转换为 JSON 对象序列

javascript - 测试事件处理程序

javascript - Redux 未连接到 React 组件

reactjs - 将 SwipeableViews 与 updateHeight() 结合使用

javascript - React-swipeable-views 使用时显示错误