H5全屏滑動

移動web時代，學會作一些簡單H5頁面會很受用。好比最多見的活動營銷簡歷H5頁面是一個全屏滾動頁面(fullpage)。如下就是一個簡單的例子。 DEMO：Demo地址

空的頁面

---

新建一個空的html5頁面,在head標籤裏面加入兩個meta標籤

<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

第一個標籤是引導瀏覽器使用最新內核。
第二個標籤是控制設備的視口寬度爲屏幕寬度，而後靜止縮放，模擬原生app的感受。

這個是apple公司定的規則，並無寫入w3c規範，可是成爲了業內標準。瀏覽器廠商都約定俗成了。

就是這樣的一個空的頁面了。

css html

---

<div class="main-wrap">
    <div class="main">
        <div class="section a">
            <h1>這是屌屌的第一屏頁面222</h1>
        </div>
        <div class="section b">
            <h1>這是霸氣的第二屏頁面</h1>
        </div>
        <div class="section c">
            <h1>這是呵呵的第三個屏頁面</h1>
        </div>
    </div>
</div>

body{
    padding: 0;
    margin: 0;
    overflow: hidden
}
.section{
    width: 100vw;
    height: 100vh;
}
h1{
    margin: 0px;
}
.main-wrap{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.main {
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 500ms cubic-bezier(0.86, 0, 0.07, 1);
}

先解釋兩個css3屬性，width: 100vw是指寬度和設備寬一致同理100vh,transition是css3的一個屬性過分。cubic-bezier(0.86, 0, 0.07, 1);是一個自定義 貝澤爾曲線。這是一個磁性滾動的過分,嗯,參數我是抄錘子科技的。

首先清下body和h1的內置樣式。main-wrap是最外面的一個DOM節點至關於窗口的做用,是固定不動的，寬高和設備一致。
main就是包含屏幕塊的標籤,操做top值,實現動畫。寫過Banner動畫的同窗確定不陌生。相似的原理。而後每一個section就是一個屏的內容。

手勢庫

---

移動端和PC端在事件中有不少不一樣,好比沒有hover事件了，click比tap慢幾百毫秒了，等等，反正坑不少，同志一塊兒好好學吧～。移動端一共有4種觸摸事件:

1. touchstart,在用戶的手指觸摸屏幕的瞬間觸發。

2. touchmove,在用戶移動手機的過程當中連續觸發。

3. touchend,用戶的手指離開屏幕的瞬間觸發。ios離開webview邊界不會觸發。

4. touchcancel,很特殊，瀏覽器差別,(不需理會)。

任何手勢就是計算這幾個事件內的值加減乘除來判斷各類手勢。
最直接的就是引入一個開源的手勢庫。Hammer就是我比較推薦的一個手勢庫。
我用的是最新版2.0.4
Hammer介紹頁

JS部分

---

var sHeight = document.querySelector('.a').clientHeight;
//獲取一屏的高度，判斷該移動多少
var sLength = document.querySelectorAll('.section').length;
//判斷有幾屏頁面
var sIndex = 0;//標記當前第幾頁
var sScroll = false;//滾動時就再也不觸發事件，防止誤點
var main = document.querySelector('.main'); //須要移動的DOM
window.onmousewheel = function(e){
    //PC端的滾輪事件，嗯不兼容火狐
    if(!sScroll){
        if(e.wheelDelta>0){
            //上一頁
            if(sIndex == 0){return; }
            sIndex--;
            scrollTo(sIndex);
        }else{
            //下一頁
            if(sIndex == sLength-1){return;}
            sIndex++;
            scrollTo(sIndex);
        }
    }
}

function scrollTo(i){
    //操做動畫的函數
    sScroll = true;
    main.style.top = -i*sHeight + 'px';
    setTimeout(function(){sScroll = false}, 700);
}

var hamm = new Hammer(document.querySelector('.main-wrap'));
hamm.get('swipe').set({ direction: Hammer.DIRECTION_ALL});
//hammer默認關閉上下swipe 設置開啓上下滑屏
hamm.on('swipedown', function(){
        if(!sScroll){
                //上一頁
                if(sIndex == 0){return; }
                sIndex--;
                scrollTo(sIndex);
        }

});
hamm.on('swipeup', function(){
        if(!sScroll){
                //下一頁
                if(sIndex == sLength-1){return;}
                sIndex++;
                scrollTo(sIndex);
        }        

});

最後放張完整的js部分的圖: