[React-章节8 实践篇] 做一个留言板项目 之 留言列表页

继上一篇《[React-章节7 实践篇] 做一个留言板项目 之 留言详情页》之后,经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能。

一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件。但是开发过程中,发现它内部封装的行为非常固化,限制了我对iscroll的控制能力,因此我转而直接基于iscroll插件实现。

网上也有一些基于浏览器原生滚动条实现的方案,找不到特别好的博客说明,而iscroll是基于Js模拟的滚动条(滚动条也是一个div哦),其兼容性更好,所以还是选择iscroll吧。

先体验效果

在讲解实现之前,可以先体验一下app整体效果。如果使用桌面浏览器访问,必须进入开发者模式,启动手机仿真,并使用鼠标左键触发滑动,否则无法达到真机效果(点我进入)!建议还是扫描二维码直接在手机浏览器中体验,二维码如下:

手机扫我

下载demo源码

点击这里下载源码,之后一起看一下实现中需要注意的事项和思路。

实现关键点

本篇实现了MsgListPage这个组件,支持消息列表的滚动查看,下拉刷新,上拉加载功能。

这里使用了开源的iscroll5实现滚动功能,它对iscroll4重构并修复若干bug,是目前主流版本。网上鲜有iscroll5实现下拉刷新,上拉加载功能的好例子,提供的仅是一些思路,绝大多数实现都是修改iscroll5源码,并不完美。我这次的实现不需要修改iscroll5源码,其实通过巧妙的设计是可以完美的实现这些特效的。

代码如下:

思路

  • 在react的componentDidMount回调中,DOM已经渲染完成。此时进行iscroll插件的初始化,监听其scroll和scrollEnd两个插件回调用于滚动监听,同时,调用fetchItems发起首次数据加载。
  • 在react的shouldComponentUpdate回调中,我判断并记录本次render是否对ul的元素进行了增删,从而在componentDidUpdate回调中决策是否需要为iscroll进行refresh刷新,因为如果iscroll容器内的元素数量发生变动,iscroll是需要重新计算整个高度等信息的。
  • 为了获知用户是否在触屏,我给div注册了onTouchStart和onTouchEnd两个事件函数,这主要是为了区分滚动条是因为触屏拖拽移动,还是因为惯性移动。
  • 在iscroll的onScroll回调中,专门处理用户的触屏行为。我判断y坐标确认当前滚动条所处的范围是顶部的上拉区域,还是底部的下拉区域。当处于上拉区域中的时候,根据拖拽的偏移量展现不同的文案,下拉区域也是一样。
  • 在iscroll的onScrollEnd回调中,专门处理滚动结束后的状态判断,主要是判断用户是否此前的触屏行为是否触发了下载需求,如果产生了下载需求那么发起网络调用fetchItems。
  • 需要注意,下拉刷新条也位于iscroll容器内,在它能被用户可见但又没有抵达刷新触发偏移量之前,如果用户没有触屏那么应该立即向上滚动把下拉提示条滚到视野范围外。上拉加载条也位于iscroll容器内,但是它总是可以被用户看见,所以对应的处理逻辑相对简单。
  • 不要在onScroll内调用scrollTo等移动滚动条的函数,因为onScroll内调用ScrollTo会导致继续回调onScroll,如此往复像在打乒乓球,是不合理的。我的实现中,onScroll仅仅检测用户的触屏行为(不处理惯性滑动),而onScrollEnd中才进行对应的逻辑处理或者发起scrollTo,而scrollTo触发的是惯性滑动(isTouching=false),因而又不会造成onScroll的困扰。
  • 点击某一行会跳转到MsgDetailPage组件,这是通过注册onClick事件回调,并通过this.context.router操作react-router的路由实现的切换。
  • 如果iscroll内元素太少没有产生滚动条,那么会影响上述的效果实现逻辑。因此,我给<ul>元素设置了min-height:150%的高度,也就是最小溢出iscroll容器50%,保证滚动条总是存在,并且刷新提示条 有足够的滚动范围逃离用户视线。
  • 如果你在手机浏览器里上下拖拽,有时候会发现页面整体在移动,而不是滚动条滚动。为了解决这个问题,我在react的根容器里,捕获了body的touchmove事件,调用了preventDefault()阻止了浏览器默认行为。

必须注意,所有的网络请求都是模拟的,并没有动态的后端计算。

本文实现了非常有意思的动画效果,也非常实用。

另外,第3个组件『留言提交页』因为精力原因,不打算继续写完了。

当前访问路径如果是:列表页 -> 详情页 -> 返回列表页,会发现列表页内容重新刷新了,滚动条也没有停留在原先的位置上。这是因为每次路由切换,都是重新分配一个component对象进行重新渲染,所以状态没有保存,我当然可以在跳转详情页之前把列表页的状态保存到一个全局变量里或者localStorage里,但是这毕竟比较麻烦。

为了实现状态保存,redux就是在做类似的框架级支持,所以我可能接下来真的要学学redux了,学无止境,太可怕!

如果文章帮助您解决了工作难题,您可以帮我点击屏幕上的任意广告,或者赞助少量费用来支持我的持续创作,谢谢~