Question

我正在使用通常的html5嫌疑人以及一些移动和JS框架（Cordova / PhoneGap，jQuery，knockout和iScroll是其中最突出的一部分）实现的中型移动单页应用程序。

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

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

我正在寻找反馈的想法是将所有页面完全放在正文中，并根据我需要滑入的方向调整左/右位置。在CSS术语中，这看起来像这样：< / p>

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都不能很好地与淘汰赛一起使用，所以使用它的小部件比获取更痛苦
必须把你的大部分css写成jqm自己风格的“补丁”是徒劳的
它的路由器不支持页面/哈希参数
它不是为处理事件链中的任何异步而设计的，例如延迟页面转换，直到从设备本地存储中读取内容为止

感谢您阅读此内容！：）

Answer 1

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

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

pager.js hideElement, showElement

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

1 个答案: