取消jQuery Mobile中Footer toolbar切换时页面刷新效果

创建于

这几天在用jQuery MobilePhoneGap做一个APP,但是在做的过程中遇到了很多问题,从刚开始只是听说过这个概念到最后把页面做出来,可以说是并未一帆风顺,还好都通过在网上查找相关资料将问题解决。这次说一下关于Footer toolbar的问题。

jQuery Mobile,预定义了很多组件。在用底部的navbar时,首先时默认的外观自己不太满意,通过层叠默认的样式解决了这个问题。但是接下来又遇到了新的问题,就是在点击底部的按钮切换页面时,页面有一个刷新跳动的过程,即切换时只想修改页面中间的内容,但是默认会修改整个page。对于有点轻微极致主义的我来说,有点难以忍受,这样的效果用户体验很差。最后在网上查找了相关问题的解决办法,在这里总结一下。

首先看一下页面基本的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!--首页start-->
<div data-role="page" id="page1">
<div data-role="content">
<!-- 页面的内容 -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="nav-glyphish-example" data-theme="c" class="footerBorder">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a data-dom-cache="true" href="#page1" target="_self" class="ui-btn-active" data-icon="custom" id="index" data-ajax="false">首页</a></li>
<li><a data-dom-cache="true" href="#page2" data-icon="custom" id="course" data-ajax="false">课程</a></li>
<li><a data-dom-cache="true" href="#page3" data-icon="custom" id="chat" data-ajax="false">课间</a></li>
<li><a data-dom-cache="true" href="#page4" data-icon="custom" id="mine" data-ajax="false">我的</a></li>
</ul>
</div>
</div>
</div>
<!--首页end-->
<!--课程start-->
<div data-role="page" id="page2">
<div data-role="content">
<!-- 页面的内容 -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="nav-glyphish-example" data-theme="c" class="footerBorder">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a data-dom-cache="true" href="#page1" data-icon="custom" id="index" data-ajax="false">首页</a></li>
<li><a data-dom-cache="true" href="#page2" class="ui-btn-active" data-icon="custom" id="course" data-ajax="false">课程</a></li>
<li><a data-dom-cache="true" href="#page3" data-icon="custom" id="chat" data-ajax="false">课间</a></li>
<li><a data-dom-cache="true" href="#page4" data-icon="custom" id="mine" data-ajax="false">我的</a></li>
</ul>
</div>
</div>
</div>
<!--课程end-->
<!--课间start-->
<div data-role="page" id="page3">
<div data-role="content">
<!-- 页面的内容 -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="nav-glyphish-example" data-theme="c" class="footerBorder">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a data-dom-cache="true" href="#page1" data-icon="custom" id="index" data-ajax="false">首页</a></li>
<li><a data-dom-cache="true" href="#page2" data-icon="custom" id="course" data-ajax="false">课程</a></li>
<li><a data-dom-cache="true" href="#page3" class="ui-btn-active" data-icon="custom" id="chat" data-ajax="false">课间</a></li>
<li><a data-dom-cache="true" href="#page4" data-icon="custom" id="mine" data-ajax="false">我的</a></li>
</ul>
</div>
</div>
</div>
<!--课间end-->
<!--我的start-->
<div data-role="page" id="page4">
<div data-role="content">
<!-- 页面的内容 -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="nav-glyphish-example" data-theme="c" class="footerBorder">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a data-dom-cache="true" href="#page1" data-icon="custom" id="index" data-ajax="false">首页</a></li>
<li><a data-dom-cache="true" href="#page2" data-icon="custom" id="course" data-ajax="false">课程</a></li>
<li><a data-dom-cache="true" href="#page3" data-icon="custom" id="chat" data-ajax="false">课间</a></li>
<li><a data-dom-cache="true" href="#page4" class="ui-btn-active" data-icon="custom" id="mine" data-ajax="false">我的</a></li>
</ul>
</div>
</div>
</div>
<!-- 我的end -->

上面是四个page基本的结构,在jQuery Mobile中将不同的page放在一个body中。这里我也是参考了别人的解决办法,用JS将页面默认的效果去掉,视觉上只是切换content中的内容。

关键的JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("a[data-icon=custom]").each(function () {
var anchor = $(this);
anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: true,
});
return false;
});
});
$("div[data-role=page]").bind("pagebeforeshow", function (e, data) {
$.mobile.silentScroll(0);
$.mobile.changePage.defaults.transition = 'slide';
});

效果

最终的页面效果如下所示(底部图标样式来自慕课网和网易公开课),是不是已经看不到页面刷新跳动的效果了。
eff.gif