AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

原文连接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin

先验货

插件代码能够在这里找到。

注意，虽然是扫码体验，可是AlloyTouch.FullPage特地对鼠标滚轮事件进行了兼容，因此PC上的全屏滚动页面也可使用它来快速制做。

使用姿式

在设计全屏滚动插件的时候，但愿开发者几乎：

• 不用写任何脚本快速生成精致H5

• 支持PC滚轮和移动触摸

• 酷炫的转场动效

• 灵活的时间轴管理

• 一切皆可配置

可是不写脚本确定没有灵活性咯？！不是的。这里不单单能够经过在HTML配置一些参数，还可经过插件的回调函数进行一些逻辑注入。就拿上面你们扫码看到的例子的部分HTML来分析下AlloyTouch.FullPage的使用姿式：

<div id="fullpage">
        <div>
            <div>
                <div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
                <div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
                <div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div>
            </div>
        </div>
        
        <div>
            <div>
                <div class="animated"  data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
                <div class="animated"  data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
            </div>
        </div>
        ...
        ...
        ...
 </div>

注意，上面只是部分HTML，并且我已经把一些和插件配置无关的HTML去掉了。下面一一进行分析：

• class="animated"符合animate.css的约定，加上了这个class表明会有动画。

• data-delay表明滚到该页面以后，被标记的DOM元素要等待多久才开始播放动画。若是开发者不标记的话默认值是0。

• data-show表明被标记的DOM元素显示的动画类型

• data-hide表明被标记的DOM元素隐藏的动画类型（这个一般用户看不到，可是为了show的时候平滑，通常设置为与data-show的相反的类型）

就这么多，配置就这么多，配置就这么多！！够简单把！！
固然你须要在js里面初始化一下：

new AlloyTouch.FullPage("#fullpage",{
        animationEnd:function () {
        
        },
        leavePage: function (index) {
               console.log("leave"+index)
        },
        beginToPage: function (index) {
            console.log("to"+index);
            pb.to(index / (this.length-1));
        }
    });

• animationEnd是滚动结束以后的回调函数

• leavePage是表明离开某个页面的回调函数

• beginToPage表明打算去某个页面的回调函数

上面的pb是用来设置nav或者progress的进度，这个能够先不用管。若是有须要的话，用户能够本身封装任意的进度条组件。

原理分析

这里主要抽取了AlloyTouch.FullPage的核心代码进行分析：

new AlloyTouch({
    touch: this.parent,
    target: this.parent,
    property: "translateY",
    min: (1 - this.length) * this.stepHeight,
    max: 0,
    step: this.stepHeight,
    inertia: false,
    bindSelf : true,
    touchEnd: function (evt, v, index) {
        var step_v = index * this.step * -1;
        var dx = v - step_v;

        if (v < this.min) {
            this.to(this.min);
        } else if (v > this.max) {
            this.to(this.max);
        } else if (Math.abs(dx) < 30) {
            this.to(step_v);
        }else if (dx > 0) {
            self.prev();
        } else {
            self.next();
        }
        return false;
    },
    animationEnd: function () {
        option.animationEnd.apply(this,arguments);
        self.moving = false;
    }
});

• 这里触摸和运动的Dom都是fullpage的dom，也就是上面的this.parent

• 由于是上下滚动，因此运动的属性是translateY

• min能够经过window.innerHeight和总共的页数推算出来，this.stepHeight就是window.innerHeight

• max显然就是0

• step显然就是window.innerHeight，也就是this.stepHeight

• inertia: false表明把惯性运动禁止掉，也就是用户松手和不会惯性滚动

• bindSelf是意思是touchmove和touchend以及touchcancel都绑定在this.parent本身，而非window下。不设置bindSelf的话touchmove和touchend以及touchcancel都绑定在window下。

这里须要特别详细说下，这个bindSelf配置很是有用，好比很典型的应用场景就是解决AlloyTouch嵌套AlloyTouch的问题。好比你上面扫码看到的例子里面，嵌套了AlloyTouch的Demo以下所示：

这里实际上是嵌套的滚动。滚动里面的会致使外面的也滚动？怎么解决？里面的滚动必须加上bindSelf而且阻止冒泡：

且看内部滚动的详细代码：

var scroller = document.querySelector("#scroller");
Transform(scroller,true);

new AlloyTouch({
    touch:"#demo0",
    target: scroller, 
    property: "translateY",  
    min:250-2000,
    max: 0 ,
    touchStart:function(evt){
        evt.stopPropagation();
    },
    touchMove:function(evt){
        evt.stopPropagation();
    },
    bindSelf:true
})

这样的话，嵌套的HTML里面的嵌套的AlloyTouch就不会向上冒泡了，也就是滚动里面的就不会触发外面的滚动。

继续分析FullPage源码：
touchEnd是用户手指离开屏幕以后的回调函数。里面有边界处理的逻辑：

• 超出min和max都会对应的校订会min和max。

• step校订，绝对值小于30px会复位

• step校订，绝对值大于30px且大于0会去上一页

• step校订，绝对值大于30px且小于0会去下一页

• return false表明不会去运行AlloyTouch松开手后的运动校订逻辑，这点很重要

animationEnd就是运动结束以后的回调函数，会去执行用户从AlloyTouch.FullPage传递过来的animationEnd，而且把moving设置为false

开启AlloyTouch.FullPage之旅

Github：https://github.com/AlloyTeam/AlloyTouch
任何意见和建议欢迎new issue，咱们会第一时间反馈。