使用jQueryMobile實現滑動翻頁效果的方法

2019-11-20 13:13:44

字體：大中小

來源：轉載

供稿：網友

本文實例講述了使用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>

<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>

<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>
      
      <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>