1

我正在开发一个中型移动单页应用程序，该应用程序使用通常的 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 都不能很好地与淘汰赛配合使用，因此使用它的小部件是痛苦多于收获
  • 必须将大部分 CSS 编写为 jqm 自己的样式的“补丁”是徒劳的
  • 它的路由器不支持页面/哈希参数
  • 它并非旨在处理其事件链中的任何类型的异步，例如延迟页面转换，直到从设备本地存储中读取某些内容

感谢您阅读到这里！:)

4

1 回答 1

0

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

也许你可以使用 pager.js 来链接页面跳转，并将这些边距和过渡 css 封装为可以应用于每个页面的 showElement 和 hideElement 事件的类。

pager.js hideElement，showElement

于 2013-06-02T05:35:28.067 回答