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底部显示的文字提示内容由于没有进入可视区不可见。
解决办法是:
- 给list-content设定最小高度为第一屏加载内容的高度,这个前提是每个list内容高度固定。
- 如果list内容高度不固定,就再次加载数据,保证滚动条正常。这样上拉加载的时候让iscroll实例再往下滚动一个文字提示内容的高度,即可显示底部的问题的文字提示。