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种触摸事件:

touchstart,在用户的手指触摸屏幕的瞬间触发。
touchmove,在用户移动手机的过程中连续触发。
touchend,用户的手指离开屏幕的瞬间触发。ios离开webview边界不会触发。
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部分的图:

空的页面

css html

手势库

JS部分

猜你喜欢