HTML5實現全兼容的下拉刷新功能

前端一直有個技術有很少框架能夠完美兼容，下拉刷新。自從ios提出這個功能后，很多設備上都在效仿，但是在h5上，有不少都是通過iscroll實現的，不過在低端安卓上略顯卡頓。同時，iscroll體積的大小和button按鈕的雙點擊bug也是讓人苦不堪言。現在，我們就用最簡單的方式來實現手機上全兼容的下拉刷新。

 

我們來看一個demo實例：http://cevio.github.io/simplizedemo/build/html/index.html#/components/lazyscroll

 

我們再來看下這個源碼 ： http://nap.webkits.cn/package/simplize-component-lazyscroll/lastest/src/js/main.js

 

下拉刷新最重要的點是window的touchmove和你下拉節點的touchmove之間的關系。

首先我們這么設定：

window.addEventListener('touchmove', function(e){
    if ( window.cantouch ){
        e.preventDefault();
    }
});

只要我們改變window.cantouch的值，那么我們就能讓window默認滾動事件禁止。

同時我們通過對節點的touch事件監聽來控制整個下拉過程。

源碼中我們能看到這樣的touchstart代碼

LazyScrollRefresh.prototype.touchEventStart = function(){
    var that = this;
    return function(e){
        if ( that.isRefreshing || that.getting ) {
            that.canMove = false;
        }else{
            that.Vue.util.isAndroid && e.preventDefault();
            that.canMove = true;
            that._y = e.targetTouches[0].pageY;
            that.y = 0;
        }
    }
}

在手指觸碰到屏幕的時候，我們canmove設定為true。

LazyScrollRefresh.prototype.touchEventMove = function(){
    var that = this;
    return function(e){
        if ( that.canMove && !that.getting ){
            that.y = e.targetTouches[0].pageY;
            var moveY = that.y - that._y;
            if ( moveY > 0 && document.body.scrollTop <= 0 ){
                that.soyie.windowTouchMoveDisabled = true;
                if ( moveY >= that.$options.refreshOffsetHeight ){
                    that.isRefreshing = true;
                    moveto.call(this, that.slowSpeed(moveY));
                    that.$icon.classList.add('lazyscroll-rotate');
                    that.$title.innerHTML = that.$options.refresh.title;
                    that.$value.innerHTML = that.$options.refresh.text;
                }else{
                    that.isRefreshing = false;
                    moveto.call(this, moveY);
                    that.$icon.classList.remove('lazyscroll-rotate');
                    that.$title.innerHTML = that.$options.defaults.title;
                    that.$value.innerHTML = that.$options.defaults.text;
                }
            }else{
                that.soyie.windowTouchMoveDisabled = false;
                that.isRefreshing = false;
                moveto.call(this, moveY);
                that.$icon.classList.remove('lazyscroll-rotate');
                that.$title.innerHTML = that.$options.defaults.title;
                that.$value.innerHTML = that.$options.defaults.text;
            }
        }
    }
}

在touchmove的時候，我們禁止掉window的touchmove。不過需要注意的是，下拉刷新的條件是，你的_x於x的距離moveY必須>0，並且body的scrolltop必須<=0。這里你可以做你自己的事情。我么使用

function moveto(height){
    this.style.webkitTransform = 'translate3d(0,' + height + 'px,0)';
}

來跟隨moveY的距離通過css3來移動整個節點。

LazyScrollRefresh.prototype.touchEventEnd = function(){
    var that = this;
    return function(e){
        if ( that.getting ) return;
        that.canMove = false;
        that._y = that.y = 0;
        that.soyie.windowTouchMoveDisabled = false;
        that.soyie.animationend(that.$root).then(function(){
            if ( that.isRefreshing ){
                if ( that.getting ) return;
                that.getting = true;
                that.$icon.innerHTML = that.$options.release.icon;
                that.$title.innerHTML = that.$options.release.title;
                that.$value.innerHTML = that.$options.release.text;
                that.emit('refreshing', that.next(that.$root));
            }else{
                (that.next())();
            }
        });
        that.$root.classList.add('layscroll-animate');
        if ( that.isRefreshing ){
            moveto.call(this, that.$options.refreshOffsetHeight);
        }else{
            moveto.call(this, 0);
        }
    }
}

在touchend的時候釋放window的touchmove事件，同時將canmove設置為false，將所有用到的數據變量設置為初始狀態。

 

基本邏輯就是這樣實現，你也可以通過這個邏輯來實現一套更加完美的下拉刷新功能，不過這里我推薦大家使用simplize來開發手機端的h5頁面。git項目地址是：

https://github.com/cevio/simplize

這套框架優勢在於路由中間件在前端頁面的使用上。我么可以想express一樣操作前端的路由，很方便。頁面切換都幾乎接近來原生。不過底層的數據驅動是用vuejs來寫的。你們可以嘗試下，效果體驗一定能讓你滿意。