Html 像 Tinder 一样滑动照片堆栈 - 跨平台(混合 / HTML5 是可以的)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17453846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:43:40  来源:igfitidea点击:

Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)

htmlcssjquery-mobileweb-applicationscross-platform

提问by John D

I'm looking to create an app like Tinder where users swipe through a photo stack. Does anyone know of a way to reproduce this effect cross-platform? So far, I'm thinking of building a web app using jQuery Mobile with

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

TouchSwipe for swipe detection; see: http://labs.rampinteractive.co.uk/touchSwipe/demos/

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

and jStack to display the images; see: http://lab.hisasann.com/jStack/

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

Are there any suggestions of a better way to do this?

有没有更好的方法来做到这一点的任何建议?

回答by Timay

Here is a jQuery Plugin for that:

这是一个 jQuery 插件:

jTinder

jTinder

回答by John D

I've finally found a hack that does something like what I described in the question:

我终于找到了一个 hack,它的作用类似于我在问题中所描述的:

Using the touchpunch library (http://touchpunch.furf.com) for drag and drop, full-screen images, and drop zones to the right and to the left seems to do the trick.

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

回答by aravind

Hope it isn't too late to post a suggestion. So, hammerjs allows to listen to multitouch and gesture events. And supports Android, iOS and Windows Phone.

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

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

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

Can try calling the photostack control's next/previous step based on the gesture event?

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