调用示例:
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> 正在刷新...</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> 正在加载...</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;