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

话不多说直接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画面的程序。