在我描述您需要了解的可用解决方案之前,这不是错误,也没有完美的解决方案。问题在于,要为到另一个页面的过渡设置动画,视口必须位于页面顶部,以便当前页面和过渡进入的页面垂直排列。
如果您在一个页面(例如 1000 像素)上的长列表中途而您要转移到的页面只有几百像素高,那么当前页面将正确地在屏幕上显示动画,但新页面不会就像在视口上方一样可见。
有两种可行的解决方案:
1。 iScroll 及其 jQuery Mobile 派生 iScrollview
iScroll 主页:http://cubiq.org/iscroll-4
iScrollview 主页:https://github.com/watusi/jquery-mobile-iscrollview
iScroll 是一种 javascript,它可以在 Web 浏览器的窗口中滚动内容,其行为与 iPhone 和 Android 等移动设备上的原生滚动非常相似。这意味着您可以使用类似本机的滚动条和物理机制在浏览器中滚动窗口。
这也是我们当前问题的解决方案。因为 iScroll 实现页面会占据 100% 的页面高度,不管 listview 滚动多远。这也是为什么在返回时 listview 仍将保持在同一位置的原因。
当然,如果你想实现这个解决方案,你应该选择 iScrollview 实现。您仍然可以实现 iScroll,但需要更多时间。
2。无声滚动
官方文档:http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
这个 jQuery Mobile 功能也是我们最初遇到这个问题的原因。在触发页面转换之前,原始页面会静默滚动到顶部。
In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page转换) 在页面改变之前。在这种情况下,当我们返回上一页时,我们可以使用pagebefpreshow 事件在页面显示之前静默滚动到底部。
//scroll to Y 100px
$.mobile.silentScroll(100);
这是一个无声滚动的工作示例:http://jsfiddle.net/Gajotres/5zZzz/
更多信息
如果您想了解有关此主题的更多信息,请查看此 article,您还将找到工作示例。