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

neuSnail 发布于2019-08-05 10:34 / 1527人阅读

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

先验货

插件代码可以在这里找到。

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

使用姿势

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

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

支持PC滚轮和移动触摸

酷炫的转场动效

灵活的时间轴管理

一切皆可配置

但是不写脚本肯定没有灵活性咯？！不是的。这里不仅仅可以通过在HTML配置一些参数，还可通过插件的回调函数进行一些逻辑注入。就拿上面大家扫码看到的例子的部分HTML来分析下AlloyTouch.FullPage的使用姿势：

 
        
            
                AlloyTouch Introduction
                
                By AlloyTeam
            
        
        
        
            
                Powerful Features
                
            
        
        ...
        ...
        ...

注意，上面只是部分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，我们会第一时间反馈。

idc机房托管专线服务全屏滚动插件 h5 全屏视频js jquery全屏插件云服务器开机要开30秒

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55888.html

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

原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。注意，虽然是扫码体验，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 评论0 收藏0
一分钟搞定AlloyTouch图片轮播组件

摘要：所以制作各种各样的轮播组件还是得心应手。第一种轮播图如上图所示。因为初始值是，所有向左边滑动一定是负值。可以得到一定是。可以拿到当前的位置以及当前所处的位置。是运动结束后的回调，用来设置的。轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch可以把惯性运动打开或者关闭，并且设置min和max为运动区域，超出会自动回弹。除了一般的竖向滚动，AlloyTouch也可以支持横向滚动，甚...

tanglijun 2019-08-22 10:48 评论0 收藏0
一分钟搞定AlloyTouch图片轮播组件

摘要：所以制作各种各样的轮播组件还是得心应手。第一种轮播图如上图所示。因为初始值是，所有向左边滑动一定是负值。可以得到一定是。可以拿到当前的位置以及当前所处的位置。是运动结束后的回调，用来设置的。轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch可以把惯性运动打开或者关闭，并且设置min和max为运动区域，超出会自动回弹。除了一般的竖向滚动，AlloyTouch也可以支持横向滚动，甚...

赵连江 2019-08-05 10:30 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
H5活动全屏滚动页面在安卓智能电视TV调试

摘要：前段时间公司做一个线上活动，在电视上商品促销。文件滚动第一屏滚动最后一屏滚动上下滚动键启动第一屏滚动最后一屏滚动样式侧边栏倒计时下拉箭头最终效果前段时间公司做一个线上活动，在电视上商品促销。产品的要求是每个商品介绍刚好满一屏，按下遥控器向下键可以整屏切换。这种功能如果实在PC端，实现起来非常容易，引用jQuery插件就能实现。但是在安卓智能电视上就会有许多兼容性问题，因为各种厂家生产...

airborne007 2019-06-25 11:30 评论0 收藏0