AlloyTouch全螢幕滾動插件 30秒搞定順滑H5頁-H5教程-PHP中文網

AlloyTouch全螢幕滾動插件 30秒搞定順滑H5頁

高洛峰

發布： 2017-01-11 09:42:35

原創

2070 人瀏覽過

使用姿勢

在設計全屏滾動插件的時候，希望開發者幾乎：

不用寫任何腳本快速生成精緻H5

支持PC滾輪和移動觸摸

動效

支持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是代表離開某個頁面的回呼函數

beToyage
上面的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;
  }
});

登入後複製

上下滾動，所以運動的屬性是translateY

min可以透過window.innerHeight和總共的頁數推算出來，this.stepHeight就是window.innerHeight

max顯然就是0

step顯然就是windowinnerHeight，也就是this.innerHeight .stepHeight

inertia: false代表把慣性運動禁止掉，也就是用戶鬆手和不會慣性滾動

bindSelf是意思是touchmove和touchend以及touchcancel都綁定在this.parentent，而非window下。不設定bindSelf的話touchmove和touchend以及touchcancel都綁定在window下。

這裡需要特別詳細說下，這個bindSelf配置非常有用，例如很典型的應用場景就是解決AlloyTouch嵌套AlloyTouch的問題。例如你上面掃碼看到的例子裡面，嵌套了AlloyTouch的Demo如下所示：

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

這裡其實是嵌套的滾動。滾動裡面的會導致外面的也滾動？怎麼解決？裡面的滾動必須加上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