Mobilebone是国内大牛张旭鑫写的一个单页面切换插件,特点是轻量级,且效果也不错,最近的webAPP项目里用过,暂时没发现有什么坑,特此安利一下,顺便介绍简单用法。
解决问题
移动端webAPP模拟原生应用的各类页面切换效果。
项目的demo:
推荐实践
作者在Mobilebone里提供了多种构造跳转页面的方式,甚至封装了ajax工具方法,以方便实现页面分步加载,但在我我的实践过程中发现还是用它的基本切换最好:主页面与子页面的结构都在一个HTML文件中,即第一次加载后所有页面实际已都存在,我们做页面切换只是让几个标签元素交替显示。
这个其实作者在自己的博客中也提到了,好处是切换更流畅(只异步请求数据,而不是后台拼接好的HTML),也更容易自己控制。作者原文如下:
虽然Mobilebone提供了直接请求JSON数据的方法,并提供了视图渲染接口。但是,以我个人经验,对于实际开发,这种实现策略是不推荐的。我认为更好的实现方法应该是这样的。页面骨架,也就是page主体,也就是一个空div默认就载入,然后所有的切换都是基本切换,而不是Ajax切换。在切换即将开始的时候(回调),您就可以使用自己,例如Zepto的Ajax方法去请求你需要的JSON数据,做你任何想做的事情,完全没有Mobilebone的限制。
页当然,这样做有一点不好的地方是会影响首次加载速度(毕竟所有HTML结构要在一开始就全部加载),这种基本切换适用于子页面内容相对简单的情况,我的项目中子页面的内容基本上是用js生成出来的,在实际上静态的HTML结构就只有个外壳。
html结构:1
2
3
4
5
6
7<div id="pageHome" class="page in"></div>
<div id="pageChild1" class="page out">
<a href="#pageHome" data-rel="back" class="backto"><span class="backto-mark"></span><span>返回</span></a>
</div>
<div id="pageChild2" class="page out">
.....
</div>
如上的HTML结构就是Mobilebone的基本切换所需的基本结构了,每一个page元素为一个页面,我在pageChild1这个子页面中增加了一个返回按钮,href内填写的是’#’+跳转页面的id,data-rel指定了跳转的过场动画为back(默认的页面切换动画只有左右滑动切换)。
这样从子页面返回主页面当然是没问题的,因为这时没有请求新数据也不需要回调,但当我们从主页面跳到子页面时应该怎么处理呢?我们需要增加回调函数,如下:1
<a href="#pageChild1" data-reload data-preventdefault="getDetails" id="xxx"></a>
1 | //主页面只有一处点击跳转时 |
当主页面跳转子页面只有一处时可以使用Mobilebone提供的公用的callback方法,通过判断进入的页面是子页面则进行数据ajax请求及解析数据。
若有多处跳转,如在列表点击每一项查看详情时则需要data-preventdefault属性指定页面跳转的处理函数,并传入相应的id等参数,同样调用ajax请求数据。
主要API
- Mobilebone.callback:进入页面时执行
- Mobilebone.fallback:离开页面时执行
分别可以用于页面切换时进入页面请求数据,离开页面清空数据。
每个方法都有pageInto和pageOut参数,表示进入和离开的页面对应的DOM元素对象。
查看在线demo参考文档