移動端用下拉重新整理的方式實現上拉載入

實現上拉載入最普遍的方式就是監聽滾動條的滾動事件，而移動端的下拉重新整理利用的是transform屬性來進行位移，那用下拉重新整理的方式實現上拉載入怎麼樣?

• html結構

<div class="main-box" id="box1">
    <div class="popup-box">
    </div>
</div>
<div class="main-box" id="box2">
    <div class="popup-box">
    </div>
</div>

這裡我們做了兩個主要的盒子，在兩個盒子內實現上拉載入。結構很簡單。

• css樣式

        * {
            margin: 0;
            padding: 0;
        }
        .main-box {
            background: skyblue;
            width: 100%;
            height: 300px;
            overflow: hidden;
        }
        .popup-box {
            width: 100%;
        }
        .item {
            width: 100%;
            line-height: 40px;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .tips{
            text-align: center;
        }
        #box2 {
            margin-top: 50px;
        }

最外面的盒子設定overflow: hidden;中間盒子不設定高度，靠子盒子item撐起。

• js程式碼

    /*下拉載入*/
    function tDscroll(obj) {
        this.key = true;                  //防止重複的請求
        this.dom = obj.dom;               //傳入的dom
        this.fn = obj.fn;                 //回撥函式
        this.outDom = this.dom.querySelector(".popup-box");  //獲取內容盒子
        this.showHeight = dom.offsetHeight;                  //顯示的高度
        this.actualHeight = this.outDom.offsetHeight;             //獲取實際高度的內容
        this.startY = 0;                               //起始點選位置
        this.changedY = 0;                             //手指移動的距離
        this.originY = 0;                              //偏移量
        var that = this;
        this.dom.addEventListener("touchstart",function (ev) {
            that.onStart(ev);
        });
        this.dom.addEventListener("touchmove",function (ev) {
            that.onMove(ev);
        });
        this.dom.addEventListener("touchend",function (ev) {
            that.onEnd(ev);
        });
        this.fn.call(this,this.outDom);
    };

    tDscroll.prototype.onStart = function (ev) {
        this.startY = ev.targetTouches[0].clientY;
        var tempArr = window.getComputedStyle(this.outDom).transform.split(",");
        if (tempArr.length > 2) {
            this.originY = parseInt(tempArr[tempArr.length - 1]) || 0;
        }
    };

    tDscroll.prototype.onMove = function (ev) {
        this.changedY = ev.touches[0].clientY - this.startY;
        var changNum = (this.originY + this.changedY);
        var scrollHeight = -changNum + this.showHeight;
        if (changNum > 50)return;
        if (scrollHeight > this.actualHeight + 50)return;
        if (scrollHeight > this.actualHeight - 50 && this.key) {
            this.fn.call(this,this.outDom);
        }
        this.outDom.style.cssText = "transform: translateY(" + changNum + "px);";
    };

    tDscroll.prototype.onEnd = function() {
        if ((this.originY + this.changedY) > 50 ) {
            this.outDom.style.cssText = "transform: translateY(0px);transition:all .3s";
        }
        if (-(this.originY + this.changedY) + this.showHeight > this.actualHeight + 50) {
            this.outDom.style.cssText = "transform: translateY(-"+(this.actualHeight - this.showHeight)+"px);transition:all .3s";
        }
    };


    var dom = document.querySelector("#box1");   //獲取dom
    var dom2 = document.querySelector("#box2");   //獲取dom
    var obj = {
        dom : dom,
        fn : add
    };
    var obj2 = {
        dom : dom2,
        fn : add
    };
    new tDscroll(obj);
    new tDscroll(obj2);
    var page = 0;                    //當前的頁數(模擬用)

    // 模擬ajax
    function add(outDom) {
        var that = this;
        this.key = false;
        var str = "";
        for (var i = 1;i < 11;i++) {
            str+="<div class=`item`>"+(i+((page)*10))+"</div>"
        }
        page++;
        setTimeout(function () {
            var tips = outDom.querySelector(".tips");              //獲取提升
            tips && outDom.removeChild(tips); //如果不是第一次 新增
            str += "<div class=`tips`>載入更多</div>";
            outDom.innerHTML += str;
            that.actualHeight = outDom.offsetHeight;
            that.key = true;
        },2000)
    }

原理也是很簡單，監聽手勢事件判斷是否距離足夠，足夠就可以新增資料啦~~~