调用示例:
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开发中,上拉加载和下拉刷新是常见的组件功能,用于提升用户体验,使得用户在滚动列表到顶部时能够方便地获取更多数据,而在滚动到底部时加载更多内容。本示例“Android自定义上拉加载下拉刷新控件”提供了...
在这个"Vue vant 上拉加载 下拉刷新实际案例源码模板"中,我们将探讨如何使用 Vant 的上拉加载(LoadMore)和下拉刷新(PullRefresh)功能来增强用户体验。 1. **Vant LoadMore组件**: Vant 的 LoadMore 组件主要...
标题中的“PullToRefresh”通常指的是Android和iOS应用开发中的一种常见交互设计,即“上拉加载/下拉刷新”功能。这个功能允许用户通过在屏幕底部向上滑动(上拉加载更多内容)或在顶部向下滑动(下拉刷新当前内容)...
"ListView上拉加载下拉刷新实现"这个主题是关于如何使ListView具有上拉加载更多数据和下拉刷新当前显示内容的功能。这两种交互方式在现代移动应用中非常常见,提高了用户体验,让用户能够方便地获取或更新列表中的...
在本项目中,"listview的上拉加载下拉刷新+本地缓存+简单的头尾布局"是一个典型的移动应用功能实现,涉及到的技术点主要包括以下几个方面: 1. 上拉加载与下拉刷新:这是移动应用中常用的功能,提升用户体验,让...
"手机端 dropload 实现上拉加载 下拉刷新"这个话题关注的就是如何通过JavaScript技术来解决这个问题,为用户提供更好的浏览体验。Dropload 是一种常见的移动端网页组件,它允许用户在滚动到底部时自动加载更多内容...
本篇文章将深入探讨如何实现RecyclerView的上拉加载更多和下拉刷新功能,这在许多应用中都是必不可少的特性。 首先,我们需要理解RecyclerView的基本用法。RecyclerView提供了一个Adapter来绑定数据,并通过...
下拉刷新 上拉加载 ... 下拉刷新+上拉加载 下拉刷新+上拉加载 使用requirejs 下拉刷新+上拉加载 自定义dom 下拉刷新+上拉加载 固定头部 下拉刷新+上拉加载 tab一个实例 下拉刷新+上拉加载 tab多个实例
在安卓应用开发中,"下拉刷新"与"上拉加载更多"是常见的用户交互功能,主要用于提升用户体验,使得用户可以方便地查看新的或者更多的数据。这个压缩包文件"安卓下拉上拉刷新相关-Listview上拉加载下拉刷新网络数据...
在本项目"PullLoadMoreRecyclerView"中,作者WuXiaolong实现了一个具有上拉加载更多和下拉刷新功能的RecyclerView,这是移动应用中常见的交互模式,特别是对于数据流无尽或者需要实时更新的内容。 1. **上拉加载更...
**上拉加载与下拉刷新框架 - mescroll** 在移动互联网时代,用户对网页的交互体验有着极高的要求,特别是在浏览数据量较大的列表时,上拉加载(Load More)和下拉刷新(Pull to Refresh)功能变得尤为重要。...
支持瀑布流,单列表,网格,使用见我博客
在安卓应用开发中,上拉加载(Load More)和下拉刷新(Pull to Refresh)是常见的功能,尤其在展示大量列表数据时。这两个特性能够提供更好的用户体验,让用户无需离开当前页面就能更新或加载更多内容。这里我们将...
在移动应用开发中,上拉加载和下拉刷新是常见的用户体验设计模式,它们极大地提升了用户在滚动内容时的交互体验。本项目结合了iscroll5和AFUI3.0两个库,来实现这一功能。 iscroll5是一款轻量级、高性能的...
在现代Web应用中,用户体验是至关重要的,而“上拉加载”和“下拉刷新”功能正是提升用户体验的重要手段。这两个特性广泛应用于各种列表或滚动视图中,比如社交媒体、电商应用或者新闻阅读器,使得用户可以无限制地...
`listview上拉加载下拉刷新demo`是一个示例项目,它演示了如何为ListView实现上拉加载更多和下拉刷新的功能,这对于处理长列表数据流的应用场景非常重要。这种功能可以提升用户体验,使用户能够轻松获取最新的或者更...