调用示例:
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;
相关推荐
Android Studio 上拉加载下拉刷新的DEMO,简单易懂,以后可以在此基础上做扩展
vant 上拉加载 下拉刷新实际案例源码模板。你可以用请求的数据放到模板里面可以直接使用,不需要改啥,只需要复制,粘贴 就 o j b k 了。
listview展示的新闻类,上拉加载下拉刷新+本地缓存+简单的头尾布局
简单实现安卓开发的上拉加载下拉刷新
下拉刷新 上拉加载 ... 下拉刷新+上拉加载 下拉刷新+上拉加载 使用requirejs 下拉刷新+上拉加载 自定义dom 下拉刷新+上拉加载 固定头部 下拉刷新+上拉加载 tab一个实例 下拉刷新+上拉加载 tab多个实例
不支持HTML
支持瀑布流,单列表,网格,使用见我博客
精致的上拉加载和下拉刷新的js框架,原生Js,不依赖于jquery,zepto,支持vue,完美运行与android,ios,各手机浏览器,兼容pc端主流浏览器。
http://www.devstore.cn/code/info/1802.html 参考此作者的,希望以后自己要用的时候方便找。希望作者不要介意。谢谢作者的分享
使用简单的js就能实现上拉加载和下拉刷新功能。
各种上拉加载下拉刷新的实现,有的资源别的地方下载分很高,这个多个demo压缩成了一个,每个一分不多吧 分享一下 应该满足你们的各种需求
Listview上拉加载下拉刷新网络数据,数据来自汇通网(股票数据),应该长期有效.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
listView上拉加载下拉刷新附后台(读网络数据),从后台读取图片,后台使用的是MyEclipse工具,附数据库文件
OkHttp3的简单使用,结合上拉加载下拉刷新一个自定义的ListView-
使用简单的js就能实现上拉加载和下拉刷新功能!
ViewPager+ListView上拉加载下拉刷新,,,
RecyclerView 上拉加载下拉刷新 高度定制头部尾部 高仿京东下拉刷新 满足绝大部分需求 下拉广告 下拉动画