iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法

JavaScript05

iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法,第1张

1、在options中加入如下参数代码(我的代码是在2470行):

//原本就有的部分

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()

})

}

使用自定义样式 效果如下: