//原本就有的部分
HWCompositing: true,
useTransition: true,
useTransform: true,
//我加入的部分
minScrollY : 0,
minScrollX : 0
2、在下面不远处(十行以内)加入如下参数:
//新加部分
this.minScrollY = this.options.minScrollY
this.minScrollX = this.options.minScrollX
原先就有的部分
this.translateZ = this.options.HWCompositing &&utils.hasPerspective ? ' translateZ(0)' : ''
3、最后一处修改,在resetPosition方法内,此处直接贴上更改之后的方法,其实真正的修改只是将this.minScrollX修改成了(代码在2830行左右):
resetPosition: function (time) {
var x = this.x,
y = this.y
time = time || 0
if ( !this.hasHorizontalScroll || this.x >this.minScrollX ) {
x = this.minScrollX
} else if ( this.x <this.maxScrollX ) {
x = this.maxScrollX
}
if ( !this.hasVerticalScroll || this.y >this.minScrollY ) {
y = this.minScrollY
} else if ( this.y <this.maxScrollY ) {
y = this.maxScrollY
}
if ( x == this.x &&y == this.y ) {
return false
}
this.scrollTo(x, y, time, this.options.bounceEasing)
return true
},
全部修改内容如上,调用的时候,只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。
注:对于scroll的滚动区域小于包裹容器的,iscroll禁止滚动,会造成无法实现下拉刷新,这里有一个小技巧,就是给滚动区域加一个min-height:101%
1,定义data数据
2,请求数据
3,如果有切换事件,重置页数及数据
4,上拉及下拉
5,下拉刷新需要修改package.js
"enablePullDownRefresh": true,
ESPullToRefresh是一个非常易于开发者使用的下拉刷新和加载更多组件。通过一个UIScrollView的扩展,可以轻松为UIScrollView的所有子类添加下拉刷新功能。 如果你想定制组件的UI样式,只要实现指定的协议方法即可。
设置默认下拉刷新组件
self.tableView.es_addPullToRefresh {
[weak self] in
/// 在这里做刷新相关事件
/// ...
/// 如果你的刷新事件成功,设置completion自动重置footer的状态
self?.tableView.es_stopPullToRefresh(completion: true) /// 设置ignoreFooter来处理不需要显示footer的情况
self?.tableView.es_stopPullToRefresh(completion: true, ignoreFooter: false)
})
}
设置默认加载更多组件
self.tableView.es_addInfiniteScrolling {
[weak self] in
/// 在这里做加载更多相关事件
/// ...
/// 如果你的加载更多事件成功,调用es_stopLoadingMore()重置footer状态
self?.tableView.es_stopLoadingMore() /// 通过es_noticeNoMoreData()设置footer暂无数据状态
self?.tableView.es_noticeNoMoreData()
})
}
使用自定义样式 效果如下: