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
Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)
提问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 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 user2254487
Check out Swing JS : https://github.com/gajus/swing
查看 Swing JS:https: //github.com/gajus/swing
and for angular: https://github.com/gajus/angular-swing
和角度:https: //github.com/gajus/angular-swing
see this thread also: Tinder style drag gesture and drop with Javascript?
另请参阅此线程: Tinder 风格的拖拽手势并使用 Javascript 拖放?
回答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 控件的下一步/上一步吗?