1

我正在构建一个非常基本的 web 应用程序来显示轮渡时刻表。

我正在使用 phonegap 将其移植到 Android 上的“本机”应用程序，但滚动时遇到了一些麻烦。

它可以在设备上的 Chrome 以及 android 浏览器上完美运行。我已经在几种设备上进行了测试，它们在浏览器中都运行良好。一旦我将项目放入Phonegap，滚动就会变得非常“断断续续”并且会跳动并粘住。我添加了一个视频链接来向您展示行为：

http://youtu.be/D18s9kgnD7g

我将简要解释一下它的工作原理：

当我们在视图中切换内容时，我们使用 translate3d CSS 方法进行转换，以避免使用页面转换。因此，我们不会滚动实际页面，而是滚动单个内容 div，以避免在内容视图之间切换时出现奇怪的滚动错误。基本上，我们在一个页面上有三个“内容视图”，当我们想要切换视图时它们会切换出来。

这是该应用程序的链接：

http://ferriesapp.ca/app/

我尝试过的事情

我们正在使用“overscroll：scroll;” 这些内容 div 之一，我知道它与 Android 2.3 之前的版本有些不兼容，但现在应该很好。

我们尝试了一些大型库，例如 iScroll 和 Scrollable，但类似的东西都无济于事。

我尝试阻止 touchmove 的默认操作。

我们使用 Zepto 的触摸模块编写了正确的触摸事件。

我已经在从 Nexus one (4.0.4) 到 Nexus 7 (4.3) 的设备上进行了测试，所有这些设备的情况都是一样的。

任何帮助将不胜感激

我已经为此苦苦挣扎了一段时间，我似乎无法在互联网上找到任何与这个“断断续续”的滚动错误有关的内容。

编辑：这是从安装到滚动错误发生时的 logcat：http: //pastebin.com/Aa7mDeAX

4

2 回答 2

1

你有一个非常讨厌的样式表。首先，您不想要任何盒子阴影，因为移动设备不喜欢那样。然后，由于您有很多空白，您希望通过 user-select: html 帮助 touch 更好地处理这些空白。

* {
    margin: 0;
    padding: 0;
    -webkit-user-select:html;
    -khtml-user-select:html;
    -moz-user-select:html;
    -ms-user-select:html;
    user-select:html;
}

这应该有助于您的滚动，但您仍然需要使用该 CSS 清理大量内容。另一个问题是您甚至没有正确加载cordova，但这对于滚动可能并不重要。

实际上，zepto_002.js 是什么？这似乎是导致主要滚动问题的原因。

于 2013-08-14T21:46:30.047 回答
0

作为一名 google play 开发人员，在一个页面上有“三个“内容视图”，当我们想要切换视图时会切换出来”不是一个好主意。如果你想走这条路，我唯一的输入是检查一下http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

于 2013-08-14T20:01:35.297 回答