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

先验货

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

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

使用姿势

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

  • 不用写任何脚本快速生成精致 H5
  • 支持 PC 滚轮和移动触摸
  • 酷炫的转场动效
  • 灵活的时间轴管理
  • 一切皆可配置

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

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

  • class="animated" 符合 animate.css 的约定,加上了这个 class 代表会有动画。
  • data-delay 代表滚到该页面之后,被标记的 DOM 元素要等待多久才开始播放动画。如果开发者不标记的话默认值是 0。
  • data-show 代表被标记的 DOM 元素显示的动画类型
  • data-hide 代表被标记的 DOM 元素隐藏的动画类型(这个通常用户看不到,但是为了 show 的时候平滑,一般设置为与 data-show 的相反的类型)

就这么多,配置就这么多,配置就这么多!!够简单把!!
当然你需要在 js 里面初始化一下:

  • animationEnd 是滚动结束之后的回调函数
  • leavePage 是代表离开某个页面的回调函数
  • beginToPage 代表打算去某个页面的回调函数

上面的 pb 是用来设置 nav 或者 progress 的进度,这个可以先不用管。如果有需要的话,用户可以自己封装任意的进度条组件。

原理分析

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

  • 这里触摸和运动的 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 并且阻止冒泡:

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

这样的话,嵌套的 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,我们会第一时间反馈。


原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/12/alloytouch-full-screen-scroll-plugin-released-30-seconds-to-get-smooth-page-h5/

  1. z 2016 年 12 月 22 日

    二维码失效

发表评论