前言
之前项目是嵌入在微信公众号中,页面访问很慢。想提升访问速度,有更好的,类似原生的体验最好的解决方法就是改为单页app.
单页app用到了mobilebone和iScroll插件。
mobilebone
mobilebone的结构是这样的:
body
#page1.page.out[data-title="page1"]
#page1.page.out[data-title="page2"]
#page1.page.out[data-title="page3"]
每个page都要定义一个id,.page表示是个页面, .out表示隐藏,data-title可以定义好每个页面的title.在a标签中定义 <a href="#page1"> 就可以显示该页面。
iScroll
用iScroll遇到的问题都是通过看demo解决的,主要是结构的问题。所以要看demo里卖弄都很统一。wrapper的第一个子元素不能给定固定的高度。因为是单页app,所以在一个页面要创建多个iScroll对象。在每个页面初始化的时候要调用refresh方法。例如:
Mobilebone.callback = function(page_in, page_out) {
// foot的active 状态处理
var id_in = page_in.id, id_out = "";
if(!id_in) return;
var ele_link_in = null, ele_link_out = null;
if(ele_link_in = document.querySelector(".footer a[href$="+id_in+"]")) {
$(ele_link_in).parents("li").addClass("active");
};
if(page_out) {
id_out = page_out.id;
ele_link_out = id_out && document.querySelector(".footer a[href$="+ id_out +"]");
$(ele_link_out).parents("li").removeClass("active");
};
iscroll.refresh();
};
Mobilebone.callback是每个page显示初始化函数。在api中可以看到。
在tab切换的时候如果tab中的内容长度不一样也要记得调用refresh()方法。
http://qbaty.iteye.com/blog/1354380这个解释的api很详细。
iscroll github地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。