如何在单页移动Web应用程序中实现自己的历史堆栈？

Question

我有一个使用Backbone和Zepto开发的单页移动应用程序.

它可以与浏览器中的后退/前进按钮一起正常工作.

当用户导航到页面时,新内容从右侧滑入,因为旧内容向左滑动(并且离开视口).如果用户按下"前进"浏览器按钮,我希望发生同样的事情.这一切都有效.

我有一个类,我添加到body元素navigate-back将翻转此行为,所以当用户使用浏览器的后退按钮导航回来时,他们会看到内容从左侧向后滑动而其他内容向右滑动.基本上恰好与前进相反.

我需要检测用户是否向后导航,以便我可以调用备用行为.我试图实现我自己的历史堆栈,但我已经遇到了很多的地方,有时它标志着前进的问题回到它破坏了视觉提示导航功能.它现在变成了一堆黑客,如果我发布它可能只会让我感到尴尬.

实现我自己的历史堆栈的最佳方法是什么,以便我可以检测用户是否在单页Backbone移动应用程序的上下文中向前/向后导航？

Answer 1

我不知道backbone.js ¹,但是我帮助开发了一个移动应用程序,它必须在html5中实现这种行为,所以我应该可以给出一些好的建议:

首先,知道history.pushState函数存在是很好的.它的大问题是它支持Android 2.3,但不支持android 3直到android 4.0.3.正如kiranvj指出的那样,这可以通过使用流行的history.js库来解决,该库提供了缺乏历史功能的polyfill解决方案.

现在,解决实际问题,我实现历史方向动画的方式是向pushState函数(history.pushState(data,title,url))添加数据,我用它来识别页面的逻辑位置.在我的应用程序中,我不仅限于水平条,但在您的情况下,您将跟踪任何新加载页面的位置,该位置比当前页面高一个位置.例如

History.pushState({position:History.getState().data.position+1},"Your title","Your URL");

接下来,当window.onstatechange或window.onanchorchange事件触发时,您会观察位置是高于还是低于当前页面(例如,通过使用我上面使用的history.js History.getState()函数),并根据此情况确定要移动的方向(较低的是左侧,右侧更高,如下图所示:

您还会注意到我已经假设您拥有第一页{position:1},而通常第一页将没有州信息.实现这一目标的方法是使用history.replaceState它将当前空状态替换为更具信息性的状态.或者,您也可以检查前面提到的任何事件的空状态,如果它是空的,则认为它是最左边的一个({position:1}).

希望这会有所帮助,如果您有任何其他问题,请随时提出.

请注意,这个答案假设您使用的是history.js,并且您需要收听稍微不同的事件(例如onpopstate)并使用稍微不同的结构(history而不是History),如果您想构建自己的解决方案.

还有一点需要注意,可以使用自己的队列数组构建它,这样可以提供更多控制,但不能与浏览器的后退按钮结合使用.这是浏览器网站的一个大问题,但是如果您正在构建一个cordova(aka phonegap)Web应用程序,则会更容易.

^{1只是阅读它,它似乎做了一些自己的历史处理,这可能使集成上述技术更复杂.}