AlloyTouch全屏滾動外掛釋出--30秒搞定順滑H5頁

當耐特發表於2016-12-22
H5

原文連結：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin

先驗貨

AlloyTouch全屏滾動外掛釋出--30秒搞定順滑H5頁

外掛程式碼可以在這裡找到。

注意，雖然是掃碼體驗，但是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如下所示：
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
任何意見和建議歡迎new issue，我們會第一時間反饋。

相關文章