像 Tinder 一样浏览照片堆栈 - 跨平台（混合/HTML5 可以）

Posted 2023-02-23

【中文标题】像 Tinder 一样浏览照片堆栈 - 跨平台（混合/HTML5 可以）

【英文标题】：Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)

【发布时间】：2013-07-01 11:43:42

【问题描述】：

我希望创建一个像 Tinder 这样的应用程序，用户可以在其中滑动浏览照片堆栈。有谁知道跨平台重现这种效果的方法？ 到目前为止，我正在考虑使用带有

的 jQuery Mobile 构建一个 Web 应用程序

TouchSwipe 用于滑动检测； 见：http://labs.rampinteractive.co.uk/touchSwipe/demos/

和 jStack 来显示图像； 见：http://lab.hisasann.com/jStack/

有没有更好的方法来做到这一点？

【问题讨论】：

我也找了很久的插件，最后我只是全屏显示了一张图片，并使用了 swipeLeft / swipeRight 事件和页面转换使其可用。这不是“更好”，但它是一种非常简单快捷的方法。

Cybrox，听起来不错！你有一些示例代码可以分享吗？

【参考方案1】：

这是一个 jQuery 插件：

jTinder

【参考方案2】：

我终于找到了一个类似于我在问题中描述的黑客：

使用 touchpunch 库 (http://touchpunch.furf.com) 进行拖放、全屏图像以及左右放置区域似乎可以解决问题。

【讨论】：

您是否有机会查看演示网址？我一直在尝试做同样的效果。谢谢

我是发布此问题的人，但我仍然没有听说过任何“适当”的解决方案。如果有人知道，请在此处发布。

请分享 jsfiddle！

【参考方案3】：

查看 Swing JS：https://github.com/gajus/swing

对于角度：https://github.com/gajus/angular-swing

另请参阅此线程： Tinder style drag gesture and drop with javascript?

【参考方案4】：

希望现在发布建议还为时不晚。因此，hammerjs 允许监听多点触控和手势事件。并支持android、ios和Windows Phone。

http://eightmedia.github.io/hammer.js/

可以尝试根据手势事件调用 photostack 控件的下一步/上一步吗？

【讨论】：

一点也不晚！谢谢你的建议。使 Tinder 的 UI 与众不同的一件事是，它不是被感知的手势，而是图片被丢弃的位置。这允许用户犹豫和反复，这在可能选择某人约会时很重要:)