上拉加载下拉刷新

调用示例：

html:

<div id="wrapper0">

<div>

...

</div>

</div>

js:

// 引入插件

import {Refresh} from '../libs/refresh';

// $('#wrapper0')[0] 为应用上下拉刷新的外层元素

window.myScroll = new Refresh($('#wrapper0')[0], {

    // 是否启用下拉刷新

    pullDownToRefresh: true,

    // 是否启用上拉加载

    pullUpToLoadMore: true,

    // 上拉刷新的回调

    refreshContent: function(){

         // 这里请求第一页的数据

    },

    // 下拉加载的回调

    loadMoreContent: function(){

        // 这里发ajax加载下一页数据

        // 没有下一页了，需要禁用下拉加载

        myScroll.disablePullUpToLoadMore()

    }

});

// 启用上拉刷新

myScroll.enablePullUpToLoadMore();

// 禁用上拉刷新

myScroll.disablePullUpToLoadMore();

// 启用下拉加载

myScroll.enablePullDownToRefresh();

// 禁用下拉加载

myScroll.disablePullDownToRefresh();

// 销毁上下拉加载

myScroll.destroy();

// 刷新scroll

myScroll.refresh();

 

代码：

import {iScroll} from './iscroll';

    function defer(fn){
        setTimeout(fn, 1);
    }
    function F() {}
    function Refresh(el, options) {
        options = Object.assign({}, Refresh.defaultOptions, options),
        iScroll.call(this, el, options),
        this._initializeDOMStructure(),
        this._status = {},
        this.options.topOffset = this._pullDownOffset(),
        this.refresh(),
        this.scrollTo(0, -this.options.topOffset, 0)
    }
    F.prototype = iScroll.prototype;
    var pullHeight = 30;
    var n = '<div class="pull"></div>'
      , r = '<span class="pullDown"></span>下拉刷新'
      , i = '<span class="pullUp"></span>松开立即刷新'
      , s = '<p class="tac"><span class="loading_01"></span>&nbsp;正在刷新...</p>'
      , o = '<div class="pull"></div>'
      , u = '<span class="pullUp"></span>上拉加载'
      , a = '<span class="pullDown"></span>松开立即加载'
      , f = '<p class="pull"><span class="loading_01"></span>&nbsp;正在加载...</p>';
    Refresh.prototype = Object.assign(new F, {
        constructor: Refresh,
        _setMinScrollY: function(y) {
            this.minScrollY = y,
            this.scrollerW = Math.round(this.scroller.offsetWidth * this.scale),
            this.scrollerH = Math.round((this.scroller.offsetHeight + this.minScrollY) * this.scale),
            this.maxScrollX = this.wrapperW - this.scrollerW,
            this.maxScrollY = this.wrapperH - this.scrollerH + this.minScrollY
        },
        _pullDownOffset: function(e) {
            return this.options.pullDownToRefresh ? this.pullDownEl ? this.pullDownEl.offset().height || pullHeight : 0 : 0
        },
        _initializeDOMStructure: function() {
        	$('head').append($('<style>.pull{text-align:center;line-height: 30px;font-size:24px;}</style>'));
            this.pullDownEl = $(n).prependTo(this.scroller),
            this._renderComponentByStatus("pulldown to refresh"),
            this.pullUpEl = $(o).appendTo(this.scroller),
            this._renderComponentByStatus("pullup to load more")
        },
        enablePullDownToRefresh: function() {
            this.options.pullDownToRefresh = true,
            this._status.toRefresh = this._status.refreshing = false,
            this._renderComponentByStatus("pulldown to refresh"),
            this.refresh()
        },
        disablePullDownToRefresh: function() {
            this.options.pullDownToRefresh = false,
            this.options.topOffset = this._pullDownOffset(),
            this.refresh()
        },
        enablePullUpToLoadMore: function() {
            this.options.pullUpToLoadMore = true,
            this._status.toLoad = this._status.loading = false,
            this._renderComponentByStatus("pullup to load more"),
            this.refresh()
        },
        disablePullUpToLoadMore: function() {
            this.options.pullUpToLoadMore = false,
            this.refresh()
        },
        disabledPullUpToLoadMore: function() {
            return console && console.log("*Deprecated*, rename to disablePullUpToLoadMore"),
            this.disablePullUpToLoadMore.apply(this, arguments)
        },
        refresh: function() {
            return this.pullDownEl && this.pullDownEl.toggle(this.options.pullDownToRefresh),
            this.pullUpEl && this.pullUpEl.toggle(this.options.pullUpToLoadMore),
            this.options.topOffset = this._pullDownOffset(),
            iScroll.prototype.refresh.apply(this, arguments)
        },
        destroy: function() {
            return this.pullDownEl.remove(),
            this.pullUpEl.remove(),
            iScroll.prototype.destroy.apply(this, arguments)
        },
        _renderComponentByStatus: function(e) {
            if (e === "pulldown to refresh")
                return this.pullDownEl && this.pullDownEl.html(r);
            if (e === "release to refresh")
                return this.pullDownEl && this.pullDownEl.html(i);
            if (e === "refreshing")
                return this.pullDownEl && this.pullDownEl.html(s);
            if (e === "pullup to load more")
                return this.pullUpEl && this.pullUpEl.html(u);
            if (e === "release to load more")
                return this.pullUpEl && this.pullUpEl.html(a);
            if (e === "loading")
                return this.pullUpEl && this.pullUpEl.html(f)
        }
    }),
    Refresh.defaultOptions = {
        hScrollbar: false,
        vScrollbar: true,
        refreshContent: function() {},
        loadMoreContent: function() {},
        pullDownToRefresh: true,
        pullUpToLoadMore: true,
        onScrollMove: function() {
            var status = this._status;
            this.options.pullDownToRefresh && (!status.toRefresh && this.y > pullHeight && (status.toRefresh = true,
            this._renderComponentByStatus("release to refresh")),
            status.toRefresh && this.y <= pullHeight && (status.toRefresh = false,
            this._renderComponentByStatus("pulldown to refresh"))),
            this.options.pullUpToLoadMore && (!status.toLoad && this.y < Math.min(this.maxScrollY, this.minScrollY) - pullHeight && (status.toLoad = true,
            this._renderComponentByStatus("release to load more")),
            status.toLoad && this.y >= Math.min(this.maxScrollY, this.minScrollY) - pullHeight && (status.toLoad = false,
            this._renderComponentByStatus("pullup to load more")))
        },
        onScrollEnd: function() {
            var self = this
              , status = this._status;
            status.toRefresh && this._renderComponentByStatus("pulldown to refresh"),
            status.toLoad && this._renderComponentByStatus("pullup to load more"),
            this.options.pullDownToRefresh && status.toRefresh && !status.refreshing && (status.refreshing = true,
            this.options.refreshContent.call(this, function() {
                defer(function() {
                    status.refreshing = status.toRefresh = false,
                    self.refresh()
                })
            })),
            this.options.pullUpToLoadMore && status.toLoad && !status.loading && (status.loading = true,
            this.options.loadMoreContent.call(this, function() {
                defer(function() {
                    status.loading = status.toLoad = false,
                    self.refresh()
                })
            }))
        }
    };
    
exports.Refresh = Refresh;