在 web 应用程序（如天气应用程序）上模仿 iPhone 滑动视图答案

【问题标题】：Imitate a iPhone swipe view on a webapp (like the weather app)在 web 应用程序（如天气应用程序）上模仿 iPhone 滑动视图
【发布时间】：2012-11-29 06:30:33
【问题描述】：

我正在尝试找到一个 Javascript sn-p，我可以使用 Javascript 和 CSS3 归档 iOS 的 UIScrollView + UIPageControl 效果。

将页面控件生成到每个视图的一个点并进行切换非常容易，但是要进行弹性移动则比较复杂。

我想自己做这件事，但对我来说似乎工作量很大，比如工作几个小时，尝试谷歌搜索，但我没有找到任何东西。我不喜欢 JQuery，但移动框架似乎没有这样做。

如果我必须自己做，你们有什么建议的方法吗？我正在考虑使用父 div，每个视图都有一堆 div。使用带有溢出的父级：隐藏；并将事件附加到父视图并监听拖动并绑定到水平滚动偏移量。这会是个好方法吗？或者使用 left 或 translate-x 的 css 过渡会更流畅？

编辑：这是我尝试过的（效果不太好）：JSFIDDLE

【问题讨论】：

这看起来很有希望：swipejs.com

标签： javascript iphone css html web-applications

【解决方案1】：

是的，

我不确定触摸滑动，但我认为“激活”或“触摸启动”处理程序可能有用。使用 CSS3 过渡来实现弹性移动非常平滑，只需更改内部 div 的 left 或 right 样式属性，transfom 就会从当前位置移动到您需要的位置。这不是世界上最好的例子，但请看这里

villasanrafael.eu/Gallery.php

【讨论】：