摘要：設(shè)置為，相對(duì)于高度為的來說就是。再看這一堆使用最關(guān)鍵的一點(diǎn)就是計(jì)算和的值?？梢钥吹交卣{(diào)里可以拿到，也就是對(duì)象的實(shí)例，當(dāng)?shù)扔诖頋L到了底部，所以這里加上代表快要滾動(dòng)底部已經(jīng)看到了加載更多。開始任何意見和建議歡迎，團(tuán)隊(duì)會(huì)第一時(shí)間反饋。

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/kandian

訪問DEMO你也可以點(diǎn)擊這里

源代碼可以點(diǎn)擊這里

如你體驗(yàn)所見，流程的滾動(dòng)的同時(shí)還能支持頭部的動(dòng)畫？不斷地加載新數(shù)據(jù)還能做到流暢的滑動(dòng)！怎么做得的？使用AlloyTouch CSS 0.2.0及以上版本便可！

var infoList = document.getElementById("infoList"),
    mockHTML = infoList.innerHTML,
    scroller = document.getElementById("scroller"),
    header = document.getElementById("header"),
    userLogo = document.getElementById("user-logo-wrapper"),
    loading = false,
    alloyTouch = null;

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    min: 160 * -20 + window.innerHeight - 202 - 50,
    max: 0,
    lockDirection: false,
    touchStart: function () {
        reastMin();
    },
    lockDirection: false,
    change: function (v) {
        if (v <= this.min + 5 && !loading) {
            loading = true;
            loadMore();
        }
        if (v < 0) {
            if (v < -140) v = -140;
            var scaleY = (240 + v) / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        } else {
            var scaleY = 1 + v / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        }
    }
})

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML += mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

function reastMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

就這么多代碼。當(dāng)然你要引用一個(gè)transformjs和alloy_touch.css.js。先看這一堆：

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);

Transform(xxx)是什么意思？

賦予xxx transformation能力

第一個(gè)scroller加上true代表關(guān)閉透視投影，為什么要關(guān)閉透視投影？

因?yàn)閟croller里面是有文本，防止文本在IOS中模糊的情況。

header是頂部的那個(gè)藍(lán)色的區(qū)域。為什么要設(shè)置originY和translateY？為什么要設(shè)置為-70？

因?yàn)閔eader的高度為140px，用戶向上滾動(dòng)的過程中，需要對(duì)其進(jìn)行scaleY變換。通常我們的做法是設(shè)置CSS3 transform-origin為 center top。而使用transformjs之后，可以拋棄transform-origin，使用originY或者originX屬性便可。originY 設(shè)置為 -70，相對(duì)于高度為140的header來說就是center top。

再看這一堆：

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    lockDirection: false,
    min: 160 * -20 + window.innerHeight - 202 - 50,
    max: 0,
    touchStart: function () {
        resetMin();
    },
    lockDirection: false,
    ...
    ...
    ...
})
...
...
function resetMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
}

使用AlloyTouch最關(guān)鍵的一點(diǎn)就是計(jì)算min和max的值。min和max決定了可以滾到哪里，到了哪里會(huì)進(jìn)行回彈等等。這里max是0毫無疑問。

但是min那一堆加減乘除是什么東西？

這里首次加載是20行數(shù)據(jù)，每一行高度大概160，主意是大概， window.innerHeight是視窗的高度，202px是滾動(dòng)的容器的padding top的值，50px是用來留給顯示加載更多的...

如上圖所示，主要是需要求???的高度。

那么怎么解決大概160*20的問題？

touchStart的時(shí)候reastMin。resetMin會(huì)去通過getComputedStyle計(jì)算整個(gè)scroller的高度。

maxSpeed是干什么用的？

用來限制滾動(dòng)的最大速度，個(gè)人感覺調(diào)整到2挺舒適，這個(gè)可以根據(jù)場(chǎng)景和被運(yùn)動(dòng)的屬性靈活配置。

outFactor是干什么用的？

用來設(shè)置超出min或者max進(jìn)行拖拽的運(yùn)動(dòng)比例系數(shù)，系數(shù)越小，超出min和max越難拖動(dòng)，也就是受到的阻力越大。

lockDirection是干什么用的？

lockDirection默認(rèn)值是true。代表用戶起手時(shí)候是橫向的，而你監(jiān)聽的是豎直方向的touch，這樣的話是不會(huì)觸發(fā)運(yùn)動(dòng)。只有起手和監(jiān)聽對(duì)應(yīng)上才會(huì)有觸摸運(yùn)動(dòng)。這里把lockDirection設(shè)置成false就沒有這個(gè)限制，不管用戶起手的direction，都會(huì)有觸摸運(yùn)動(dòng)。

再看AlloyTouch注入的change事件！頭部動(dòng)效核心的一個(gè)配置函數(shù)：

change: function (v) {
    if (v <= this.min + 5 && !loading) {
        loading = true;
        loadMore();
    }
    if (v < 0) {
        if (v < -140) v = -140;
        var scaleY = (240 + v) / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    } else {
        var scaleY = 1 + v / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    }
}

v代表當(dāng)前被運(yùn)動(dòng)對(duì)象的被運(yùn)動(dòng)屬性的當(dāng)前的值，根據(jù)這個(gè)v去做一些效果和加載更多。

什么時(shí)候加載更多？

當(dāng)滾動(dòng)你能看到加載更多的時(shí)候去加載更多

什么時(shí)候能看到加載更多？

v <= this.min + 5。 可以看到change回調(diào)里可以拿到this，也就是AlloyTouch對(duì)象的實(shí)例，當(dāng)v等于this.min代表滾到了底部，所以這里加上5代表快要滾動(dòng)底部已經(jīng)看到了加載更多。就去執(zhí)行l(wèi)oadMore函數(shù)。

loading是干什么用的？

防止重復(fù)loadMore用得，因?yàn)閏hange執(zhí)行得很頻繁，所以這里會(huì)通過loading的狀態(tài)去鎖上。

下面一堆設(shè)置scaleX、scaleY、translateY以及一堆數(shù)字是怎么來的？

慢慢調(diào)試得出的最佳效果~~反正就是根據(jù)v的數(shù)值映射到 header和用戶頭像的transform屬性上，這里就不一一講了。

再看loadMore：

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML += mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

這里使用了一段假的HTML去模擬AJAX異步請(qǐng)求以及數(shù)據(jù)轉(zhuǎn)HTML的過程，整個(gè)耗時(shí)500ms，500ms后會(huì)去：

插入HTML

重置loading狀態(tài)

重置AlloyTouch的min

最后：

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

阻止掉整個(gè)document的默認(rèn)事件，不會(huì)把整個(gè)頁面拖下來，在手Q里的話，你就看不到網(wǎng)址和X5內(nèi)核提供技術(shù)支持了。

Github：https://github.com/AlloyTeam/AlloyTouch

任何意見和建議歡迎new issue，AlloyTouch團(tuán)隊(duì)會(huì)第一時(shí)間反饋。