可曾看見過那些在微信上轉瘋了的H5神作？好生羨慕啊，那麼從今天開始，我將從零開始學習製作H5應用，看看那麼漂亮的頁面是怎麼樣一步一步形成的。

2016年2月更新：之前很多朋友問我要原始碼，由於工作原因，一直沒來得及上傳，今天已上傳至github，點選下面的地址可檢視下載最終原始碼：

準備

在學習製作H5應用之前，必須具備以下基礎前提：

HTML,CSS,JS基本編寫與製作能力

瞭解了H5中的各種新特性

有一定的邏輯思維能力，可以將複雜任務通過分析簡化為若干原子事件來處理

看得懂漢語，以及教程中出現的前端術語。

任務

這是本系列的第一篇，任務非常簡單，

製作一個具有3張頁面，每次只顯示其中一張頁面，當手指向上滑動裝置螢幕時當前頁面消失下一張頁面出現，並具有一定的過渡效果

分析

雖然任務非常簡單，我們還是要把它拆分為幾部來做，如下：

1、構建頁面：具有三張頁面，第一張顯示，另外兩張隱藏；
2、使用JS監聽手勢向上滑動的事件，並動態改變三張頁面的顯示/隱藏樣式；
3、給頁面顯示和隱藏新增過渡的動畫效果；

實現

第一步

首先，我們在html頁面中構建頁面結構：

index.html

    <div id="pages">

        <div class="page page1"
 
>頁面一</div>
        <div class="page page2">頁面二</div>
        <div class="page page3">頁面三</div>

    </div>

這裡，我們為了方便看效果，在每個頁面中加入了相應文字來標示該頁面

然後，使用CSS檔案進行樣式佈局：

style.css

#pages {
  width: 100%;
  heigt: 100%;
}
.page {
  width: 100%;
  height: 100%;
  position: absolute
 
;
  top: 0;
  left: 0;
  display: none;
  color: white;
}
.page1 {
  background: blue;
  display: block;
}
.page2 {
  background: red;
}
.page3 {
  background: yellow;
}

這裡，設定了統一的樣式.page 以便讓三張頁面都能全屏顯示，並且設定絕對定位使他們完全重疊，給他們設定了不同背景色用於標識，並讓第一頁顯示出來，其他兩張隱藏。

給index.html引入樣式：

<title>H5場景應用1.0——實現頁面滑動效果</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>

我們來看看效果：

我們使用了Opera Mobile Emulator工具來在PC上模擬手機瀏覽器的顯示和操作。

至此，第一步就很簡單地完成了。

第二步

首先，我們要監聽使用者的手勢，這個向上滑動的事件怎麼來做呢？

這裡，我們推薦使用zepto.js類庫，因為它預設提供了對觸屏的滑動事件的支援。

將zepto.js引入index.html，這裡，為了提升載入速度，我們使用百度靜態資源庫檔案,並且同時引入我們自己用來寫自定義功能的js檔案myfn.js，現在它還是空的。還有一個js檔案touch.js是必須的，它是zepto的一個模組，用來支援觸屏操作，而zepto.js預設是不包含該模組的

index.html

<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="touch.js"></script>
<script src="myfn.js"></script>

現在，在myfn.js裡實現監聽函式和頁面隱藏，顯示函式。

myfn.js

//測試對swipeUp(向上滑動)的監聽是否有效
$(document).swipeUp(function(){
    alert("ok");
});

儲存，看看效果：

說明我們引入zepto後對觸屏的向上滑動事件的監聽是成功的，那麼現在我們可以編寫內部頁面隱藏顯示的切換效果了。

在編寫程式碼之前，我們把這一步的邏輯流程再細化一下，看看流程圖：

這裡面，我們明確了整個程式的外部流程，然後再來深究一下每一步操作的思路：

獲取當前頁面序號：

很顯然，當前頁面就是當前顯示的頁面，可以有兩種方法來獲取：
第一種是給當前頁面新增class=”show”，然後獲取時直接查詢class=”show”的元素；
第二種是設定一個全域性變數curpage，頁面初次載入時它的值肯定是1，然後每次向上滑動，它的值自增1，就是當前頁面的序號；
很明顯，第二種實現起來比第一種要簡單，而且效率和架構更優。

隱藏當前頁

給當前頁新增class=”hide”

判斷是否為最後一頁

在獲取到當前頁面序號後，就要判斷是否為最後一頁。那麼如何判斷呢？當然是先要知道總共有多少頁，然後看當前頁面序號是否與最大頁數相等，相等，就是最後一頁，不相等，則不是最後一頁。而總頁數就是#page下面的class為.page 的div的個數。

顯示第一頁

這個很簡單，給序號為1的頁面設定class=”show”，將其他所有頁面隱藏

顯示下一頁

獲取到當前頁序號後，這一步也很簡單，就是讓序號加1，然後讓class為.page+序號的頁面增加一個class=”show”就可以了

好了，有了以上分析，我們就可以開始編碼了，最終實現程式碼如下：

myfn.js

var curpage=1;
var totalpage,nextpage;

$(document).swipeUp(function(){

    //隱藏當前頁面

    $(".page"+curpage).removeClass("show");
    $(".page"+curpage).addClass("hide");


    //判斷當前頁是否為最後一頁

        //獲取總頁數
    totalpage = $(".page").length;
    //如果是最後一頁，顯示第一頁，否則顯示下一頁
    if(curpage == totalpage){
        $(".page1").removeClass("hide");
        $(".page1").addClass("show");
        curpage =1;
    }else{
        nextpage = curpage+1;
        $(".page"+nextpage).removeClass("hide");
        $(".page"+nextpage).addClass("show");
        curpage = nextpage;
    }


});

然後在style.css里加入兩個樣式：

style.css

……
.page3 {
  background: yellow;
}
.hide {
  display: none;
}
.show {
  display: block;
}

再來看效果：

頁面剛載入是上圖這樣的

第一次向上滑動後切換到了頁面二

第二次向上滑動後切換到了頁面三

第三次向上滑動後頁面又切回頁面一

第三步

接下來就要為我們的隱藏消失效果設定過渡效果了，那麼前面我們學習過關於animation的動畫效果就派上用場了，這裡我們使用animation.css外掛來省去編寫animation動畫的工作。

在index.html中加入以下引用：

    <link rel="stylesheet" href="animations.css" type="text/css"/>

然後將myfn.js做一下小小的改造：

myfn.js

var curpage=1;
var totalpage,nextpage;

$(document).swipeUp(function(){

//判斷當前頁是否為最後一頁

        //獲取總頁數
    totalpage = $(".page").length;
    //如果是最後一頁，顯示第一頁，否則顯示下一頁
    if(curpage == totalpage){
       $(".page1").removeClass("hide");
        $(".page1").addClass("show");
        $(".page1").addClass("pt-page-moveFromBottom");
        $(".page"+curpage).removeClass("show");
        $(".page"+curpage).addClass("hide");
        $(".page"+curpage).addClass("pt-page-moveToTop");
        curpage =1;
    }else{
        nextpage = curpage+1;
        $(".page"+nextpage).removeClass("hide");
        $(".page"+nextpage).addClass("show");
        $(".page"+nextpage).addClass("pt-page-moveFromBottom");
        $(".page"+curpage).removeClass("show");
        $(".page"+curpage).addClass("hide");
        $(".page"+curpage).addClass("pt-page-moveToTop");
        curpage = nextpage;
    }
});

這其中的pt-page-moveFromBottom和pt-page-moveToTop就是animation.css裡幫我們定義的移入移出動畫了。

再開啟手機瀏覽器測試，就可以看到兩個頁面之間的切換效果了。雖然切換效果中間有一瞬間是白場，這個問題我們在下一版進一步完善。

至此，我們用不多的程式碼完成了我們的V1.0版的任務，這一次程式碼不多，但是中間要對整個程式的流程進行分析與設計，這種思路是這一次的重點。這種思路確定後，以後的版本中在這一版本的基礎上進行功能的擴充套件就簡單多了，期待V2.0版哦！