本文實例講述了使用jQueryMobile實現滑動翻頁效果的方法。分享給大家供大家參考。具體分析如下：
滑動手勢在移動設備是很流行的，在移動設備中滑動翻頁中很常見
雖然這個功能可以在jQueryMobile中實現，但是個人與之前一篇【jQuery手機浏覽器中拖拽動作的艱難性分析】中的觀點一致，由於這是在手機浏覽器中浏覽，而不是安卓的一個獨立APP，所以不要經常除點擊以外的移動設備手勢，以免跟手機浏覽器與手機系統本身的手勢發生沖突。
那麼，使用jQueryMobile實現滑動翻頁的效果到底怎麼做呢？
一、基本目標
在手機浏覽器中的jQueryMobile框架頁中現實滑動手勢翻頁的功能，如下圖：
並且記錄當前頁的頁數，隨用戶滑動而自動增加與減少。
二、制作過程
關於JqueryMobile的界面怎麼布置，不再細說，詳情請翻閱之前一篇【jQueryMobile之Helloworld與頁面切換的方法】
如下的代碼注釋，主要是敘述如何通過對JqueryMobile封裝好的滑動手勢jQuery Mobile Swipeleft與jQuery Mobile Swiperight處理，來實現上面的頁面，W3C《jQuery Mobile Touch 事件》一文中對此的敘述是有問題的，實驗代碼與給出的代碼並不一致：
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 需要的文件不再多嘴 -->
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css">
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<!-- 必須此頁命名，否則下面的jquerymobile滑動手勢控制不到，不起作用 -->
<div data-role="page" data-position="fixed" data-fullscreen="true" id="mypage">
<div data-role="header" data-theme="b" data-tap-toggle = "false">
<h1>Title</h1>
</div>
<!-- html部分很簡單，就在content中布局4個圖層，其中div1一開始顯示，其余隱藏即好，之所以把“你好”二字設置得大大的，是由於jquerymobile的滑動必須滑到圖層內的非空白部分，即使你設置了width:100%; height:100% -->
<div data-role="content">
<div id="div1">
<h1>你好1</h1>
</div>
<div id="div2" style="display:none;">
<h1>你好2</h1>
</div>
<div id="div3" style="display:none;">
<h1>你好3</h1>
</div>
<div id="div4" style="display:none;">
<h1>你好4</h1>
</div>
<!-- 此乃記錄翻到那一頁的圖層，有一個名叫divnumber的行內文本 -->
<div>
<span id="divnumber"></span><span>/4</span>
</div>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="info">a</a></li>
<li><a href="#" target="_self" data-icon="grid">b</a></li>
<li><a href="#" target="_self" data-icon="star">c</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
/* jquery部分，先定義一個記錄翻到多少頁的變量 */
var divnum=1;
/* 相當於.innerhtml=""; jquery設置一個節點的值是需要這樣設定的 */
$("#divnumber").text(divnum)
/* 在#mypage頁面開啟觸控 */
$(document).on("pageinit","#mypage",function(){
/* 如果對div1的非空白部分向左滑，那麼div1就隱藏，div2就顯示，同時頁面計數器+1，並更新divnumber這個行內文本 */
$("#div1").on("swipeleft",function(){
$("#div1").hide("fast");
$("#div2").show("fast");
divnum=divnum+1;
$("#divnumber").text(divnum)
});
/* 如果對div2的非空白部分向右滑，那麼div1就顯示，div2就隱藏，同時頁面計數器-1，並更新divnumber這個行內文本 */
$("#div2").on("swiperight",function(){
$("#div1").show("fast");
$("#div2").hide("fast");
divnum=divnum-1;
$("#divnumber").text(divnum)
});
/* 如果對div2的非空白部分向左滑，那麼div2就隱藏，div3就顯示，同時頁面計數器+1，並更新divnumber這個行內文本，下面如此類推 */
$("#div2").on("swipeleft",function(){
$("#div2").hide("fast");
$("#div3").show("fast");
divnum=divnum+1;
$("#divnumber").text(divnum)
});
$("#div3").on("swiperight",function(){
$("#div2").show("fast");
$("#div3").hide("fast");
divnum=divnum-1;
$("#divnumber").text(divnum)
});
$("#div3").on("swipeleft",function(){
$("#div3").hide("fast");
$("#div4").show("fast");
divnum=divnum+1;
$("#divnumber").text(divnum)
});
$("#div4").on("swiperight",function(){
$("#div3").show("fast");
$("#div4").hide("fast");
divnum=divnum-1;
$("#divnumber").text(divnum)
});
});
</script>
請注意，div1沒有向右滑的手勢，因為這是第一頁，div4沒有向左滑的手勢，因為這是最後一頁。
希望本文所述對大家的jQueryMobile程序設計有所幫助。