html - 这是移动单页应用程序中页面管理的可行设计/策略吗？

Question

我正在开发一个中型移动单页应用程序，该应用程序使用通常的 html5 嫌疑犯和一些移动和 JS 框架(Cordova/PhoneGap、jQuery、knockout 和 iScroll 是其中最突出的)实现。

直到最近，我一直在使用 jQuery-Mobile，但最终对它感到非常沮丧，并决定需要启动它。

在我的标记中，我仍然将所有页面作为 div 标签直接放在 body 标签下面，现在我正在寻找一种策略来管理页面和它们之间的转换。

我正在寻求反馈的想法是将所有页面绝对定位在主体内，并根据我需要滑入的方向调整左/右位置。在 CSS 术语中，这看起来像这样:

body {
    position:relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
body > div {
    position:absolute;
    top:0;
    left:320px; /* this is page/viewport width, will be calculated and set on app start */
}
body > div.current-page {
    left:0;
}

我的期望是，这种结构将使使用 CSS3 转换添加页面转换变得容易。

• 有人试过这个吗？
• 类似的东西是否适用于各种移动平台上的浏览器？
• 有什么陷阱或需要注意的事情吗？
• 对于用于实际页面转换的库有什么建议吗？
• 这能很好地与 iScroll 配合使用吗？

我已经着眼于路由器库/实现，但也愿意接受这方面的建议。

如果您想知道我为什么要放弃 jquery-mobile，以下是我的首要原因:

• 所有从数据标签重写的 DOM 都不能很好地与 knockout 一起使用，因此使用它的小部件是痛苦多于收获
• 必须将您的大部分 css 编写为 jqm 自己的样式的“补丁”是没有效率的
• 它的路由器不支持页面/哈希参数
• 它并非旨在处理其事件链中的任何类型的异步，例如延迟页面转换，直到从设备本地存储中读取某些内容

感谢您阅读到这里! :)

Answer 1

我需要对此进行测试，但我已经成功地使用 webkit(chrome、android、ios)和 ie10 在我的相对 div 上使用负边距将它们从彼此的顶部移开。如果相对 div 的负边距等于其宽度，则它应该位于屏幕左侧。要将其滑入中心 View ，请在 margin-left 上为 div 提供过渡 css，然后将其 margin-left 设置为零。

也许您可以使用 pager.js 在页面跳转之间进行链接，并将此类边距和过渡 css 封装为您可以应用于每个页面的 showElement 和 hideElement 事件的类。

pager.js hideElement, showElement