react + iscroll上拉加载下拉刷新分享

移动端上拉加载下拉刷新，是一个很常见的web需求，下面结合自己的学习分享一下心得。

引用iscroll库

import iScroll from 'iscroll/build/iscroll-probe';只有这个库可以返回滚动时的滚动距离。

在react组件生命周期中，监听scroll事件

在react组件生命周期中，componentDidMount里监听document的touchmove事件，禁止捕获。不然用户touchmove的时候，事件会被document捕获，达不到我们想要的效果。
fetchData请求数据，并且在请求数据完成后，立即初始化iscroll实例，并监听iscroll实例的scroll和scrollEnd事件。

监听两个事件

在iscroll的scroll事件监听函数里，如果滚动距离this.iscrollInstance.y(减数) 与 最大距离this.iscrollInstance.maxScrollY (this.iscrollInstance.maxScrollY(负值) = this.wrapperHeight - this.scrollerHeight，被减数)之差大于设定的值scrollDistance，并且没有数据正在加载时，更新组件状态为，‘松开加载数据。。。’；如果滚动距离this.iscrollInstance.y大于设定的值scrollDistance，并且没有数据正在加载时，更新组件状态为，‘松开刷新数据...’。
在iscroll的scrollEnd事件监听函数里，fetchData请求数据，并更新state。
注意，因为在scroll事件和scrollEnd事件里都更新了state（更新了文字提示'松开加载数据..'和‘数据正在加载中....’），所以在shouldComponentUpdate生命周期里需要区分下dataList是否发生改变，以告诉componentDidUpdate是否重新渲染iscroll。只在fetchData成功，并且dataList发生变化才refresh iscroll实例。

上拉加载和下拉刷新文字提示的显示

下拉刷新直接显示在list-content的头部即可。上拉加载的显示有点问题，这个iscroll库第一次渲染数据，滚动条不准确(不能一次显示全部已加载的数据)，导致在list-content底部显示的文字提示内容由于没有进入可视区不可见。
解决办法是：

1. 给list-content设定最小高度为第一屏加载内容的高度，这个前提是每个list内容高度固定。
2. 如果list内容高度不固定，就再次加载数据，保证滚动条正常。这样上拉加载的时候让iscroll实例再往下滚动一个文字提示内容的高度，即可显示底部的问题的文字提示。