JavaScript实现一个手机APP下拉刷新功能

共计 2482 个字符，预计需要花费 7 分钟才能阅读完成。

话不多说直接 show 代码 …

(function(global, factory) {if (typeof exports === 'object' && exports && typeof exports.nodeName !== 'string') {module.exports = factory(exports); // CommonJS
    } else if (typeof define === 'function' && define.amd) {define(['exports'], factory); // AMD
    } else {global.PullRefresh= {};
        factory(global.PullRefresh); // script, wsh, asp
    }
}(this, function PullRefreshFactory(pullRefresh) {
    var hasTouch = 'ontouchstart' in window,
    EV_START = hasTouch ? 'touchstart' : 'mousedown',
    EV_MOVE = hasTouch ? 'touchmove' : 'mousemove',
    EV_END = hasTouch ? 'touchend' : 'mouseup',
    EV_CANCEL = hasTouch ? 'touchcancel' : 'mouseup';
    function Refresh(options) {
        this.options = {
            pullHeight: 80,
            onPullEnd: null,
            onPullMove: null
        };
        for (var i in options) this.options[i] = options[i];
        this._bind(EV_START);
    }
    function Pull() {
        var startYValue = 0,
            isPull = false,
            P = function() {};
            P.prototype = {setStartY: function(value) {startYValue = parseInt(value, 10);
                },
                getStartY: function() {return startYValue;},
                setPull: function(boolValue) {isPull = boolValue;},
                getPull: function() {return isPull;}
            };
        return new P();}
    var defaultPull = Pull();
    Refresh.prototype = {_start: function(e) {
            var that = this;
            var touch = hasTouch ? e.changedTouches[0] : e;
            defaultPull.setStartY(touch.clientY);
            that._bind(EV_MOVE);
            that._bind(EV_END);
            that._bind(EV_CANCEL);
        },
        _move: function(e) {
            var that = this;
            var touch = hasTouch ? e.changedTouches[0] : e;
            this.options.onPull && this.options.onPull.call(that, defaultPull.getStartY(), touch);
            if (touch.clientY - defaultPull.getStartY() > that.options.pullHeight) {defaultPull.setPull(true);
            }
        },
        _end: function(e) {
            var that = this;
            defaultPull.setStartY(0);
            if (defaultPull.getPull()) {this.options.onPullEnd && this.options.onPullEnd.call(that);
                defaultPull.setPull(false);
            }
            $(this.options.container).css({'margin-top': 0});
        },
        _bind: function (type, bubble) {
            var el = window;
            if (this.options.container) {el = $(this.options.container).get(0);
            }
            el.addEventListener(type, this, !bubble);
        },
        /**
         * https://developer.mozilla.org/en-US/docs/Web/API/EventListener#handleEvent()
         * @param e
         */
        handleEvent: function(e) {
            var that = this;
            switch (e.type) {
                case EV_START:
                    that._start(e);
                    break;
                case EV_MOVE:
                    that._move(e);
                    break;
                case EV_END:
                    that._end(e);
                    break;
                case EV_CANCEL:
                    that._end(e);
                    break;
            }
        }
    }
    pullRefresh = function(options) {return new Refresh(options);
    };
    return pullRefresh;
}));

使用方法：

var PullRefresh = require('./PullRefresh');
PullRefresh({container: 'body> .container',
    pullHeight: 50,
    onPull: function(y, e) {
        var my = e.clientY;
        if (my> y) {
            var top = my - y;
            if (top> this.options.pullHeight) {top = this.options.pullHeight;}
            $(this.options.container).css({'margin-top': my - y})
        }
    }
});

其实这个非常的简单，就直接通过 margin-top 来控制的，可以将上面代码改造成带 loading 画面的程序。