问题描述
实现页面刷新功能,上拉显示下一页数据,下拉显示上一页数据。
方案一:
React Native 中的 RefrshControl 可以实现下拉刷新功能,但是下拉后页面顶部会有一个 loading 的图标。ListView 的 onEndReached 函数可以实现上拉刷新的功能,但是 onEndReached 不容易控制,会存在不断进入该函数,即该函数会多次被调用,不易控制页面什么时候该显示什么。
方案二:
ListView 具有 ScrollView 的所有属性,当我们上、下滑动时会触发 onScroll,因此在这个函数里可以监听到上下滑动这个动作,同时根据内置属性 offset 值的正负可以判断到底是上拉还是下拉。然而,这里存在另一个问题,只要一拖动页面,该函数就会无限次数的被调用。
方案三:
ListView 中的 onScrollEndDrag 会在拖动结束后出发该函数一次。同样根据内置属性 offset 值的正负可以判断到底是上拉还是下拉。
总结:
综上,第三种方案最优。那么,问题来了,下拉可以根据 offset 的正负值判断;上拉呢,如何判断什么时候拉到页面最底部呢?
通过读 ListView 的 onEndReached 函数的源码可以看到下面这样的一个函数:
_getDistanceFromEnd: function(scrollProperties: Object) {
return scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset;
}
因此,上拉的时候,可以通过 contenLength - visibleLength - offset
的值来判断是否拉到 ListView 的最底部。