AlloyTouch 實戰 --60 行代碼搞定 QQ 看點資料卡

原文連接：github.com/AlloyTeam/A…

先驗貨

• 訪問DEMO你也能夠點擊這裏
• 源代碼能夠點擊這裏

如你體驗所見，流程的滾動的同時還能支持頭部的動畫？不斷地加載新數據還能作到流暢的滑動！怎麼作得的？使用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);複製代碼

就這麼多代碼。固然你要引用一個transformjs和alloy_touch.css.js。先看這一堆：

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);複製代碼

• Transform(xxx)是什麼意思？

  賦予xxx transformation能力

• 第一個scroller加上true表明關閉透視投影，爲何要關閉透視投影？

  由於scroller裏面是有文本，防止文本在IOS中模糊的狀況。

• header是頂部的那個藍色的區域。爲何要設置originY和translateY？爲何要設置爲-70？

  由於header的高度爲140px，用戶向上滾動的過程當中，須要對其進行scaleY變換。一般咱們的作法是設置CSS3 transform-origin爲 center top。而使用transformjs以後，能夠拋棄transform-origin，使用originY或者originX屬性即可。originY 設置爲 -70，相對於高度爲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最關鍵的一點就是計算min和max的值。min和max決定了能夠滾到哪裏，到了哪裏會進行回彈等等。這裏max是0毫無疑問。

• 可是min那一堆加減乘除是什麼東西？

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

  

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

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

  touchStart的時候reastMin。resetMin會去經過getComputedStyle計算整個scroller的高度。

• maxSpeed是幹什麼用的？

  用來限制滾動的最大速度，我的感受調整到2挺溫馨，這個能夠根據場景和被運動的屬性靈活配置。

• outFactor是幹什麼用的？

  用來設置超出min或者max進行拖拽的運動比例係數，係數越小，超出min和max越難拖動，也就是受到的阻力越大。

• lockDirection是幹什麼用的？

  lockDirection默認值是true。表明用戶起手時候是橫向的，而你監聽的是豎直方向的touch，這樣的話是不會觸發運動。只有起手和監聽對應上纔會有觸摸運動。這裏把lockDirection設置成false就沒有這個限制，無論用戶起手的direction，都會有觸摸運動。

再看AlloyTouch注入的change事件！頭部動效核心的一個配置函數：

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表明當前被運動對象的被運動屬性的當前的值，根據這個v去作一些效果和加載更多。

• 何時加載更多？

  當滾動你能看到加載更多的時候去加載更多

• 何時能看到加載更多？

  v <= this.min + 5。 能夠看到change回調裏能夠拿到this，也就是AlloyTouch對象的實例，當v等於this.min表明滾到了底部，因此這裏加上5表明快要滾動底部已經看到了加載更多。就去執行loadMore函數。

• loading是幹什麼用的？

  防止重複loadMore用得，由於change執行得很頻繁，因此這裏會經過loading的狀態去鎖上。

• 下面一堆設置scaleX、scaleY、translateY以及一堆數字是怎麼來的？

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

再看loadMore：

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

這裏使用了一段假的HTML去模擬AJAX異步請求以及數據轉HTML的過程，整個耗時500ms，500ms後會去：

• 插入HTML
• 重置loading狀態
• 重置AlloyTouch的min

最後：

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);複製代碼

阻止掉整個document的默認事件，不會把整個頁面拖下來，在手Q裏的話，你就看不到網址和X5內核提供技術支持了。

開始AlloyTouch

Github：github.com/AlloyTeam/A…

任何意見和建議歡迎new issue，AlloyTouch團隊會第一時間反饋。