[React-章节9 实践篇] 做一个留言板项目 之 实现Loading特效

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

一般h5应用在页面加载完成之前都会有一个loading加载的动画效果,一旦完成加载一次性展现完整的内容给用户,这样更贴合native应用的体验,我相信没有用户喜欢看着一个残缺的页面等待网络数据下载完成。

我也要实现这样一个效果,原理是在每个页面最初显示一个转菊花的画面,在背后发起网络请求,等待必要的数据获取完成后停止转菊花的画面,转而渲染页面本身的内容。

实现为通用组件

我将转菊花实现成了一个组件叫做LoadingLayer,它在一个div的中央加载了一个svg转菊花图片,并支持上层通过props传递内联css样式进行控制。本次并没有实现加载失败之后点击重新刷新的效果,这个我计划在后续redux学习中去实现。

先看一下LoadingLayer的实现:

我在common/img目录里准备了一个loading.svg菊花动画,并在这里加载。最重要的是上层需要通过透传props.outerStyle来控制整个加载页面的高度,而菊花图片已经通过css控制总是显示在中央了:

另外,实现过程中发现svg图片加载时报错,原来是我的webpack.config.js中url-loader少配置了svg后缀文件的识别,加上即可:

改造现有页面

改造的思路需要把握2方面,一个是首屏是loading组件,同时发起网络请求获取数据,在此期间仍旧展示loading效果。其次,加载数据完成后通过state变换重新渲染组件原本内容。

MsgListPage列表页

改造后的MsgListPage组件如下:

  • 添加一个state变量isLoading,并在render()方法中进行分支变换。
  • 在componentDidMount中仅发起网络请求,因为此时renderPage尚未执行,还无法初始化iscroll。
  • fetchItems完成后,保存items同时设置isLoading=false。这样在componentDidUpdate的时候,如果isLoading为false表示完成了renderPage()的渲染,所以可以初始化iscroll对象,当然别忘记将下拉提示栏滚到屏幕外面。

MsgDetailPage详情页

比列表页的处理还要简单很多,不再赘述:

这个页面最大的差别就是上面一个ToolBar返回栏,即便在转菊花期间也是存在的,这样用户不耐烦可以点击返回退到列表页。

扫码体验

手机扫描,使用浏览器打开!

1475911205

思考

经过一系列修修改改,这份代码成为了现在这个样子。

最大的困扰其实就是,每次看完详情页后退到列表页,列表页都被重新刷新,我先前停留的位置压根找不到了,这种体验是没法接受的。

这个问题从几篇之前我就提出,但是一直避而不谈,现在我认为时机成熟多了,是时候专门研究一下相关的技术点了,让我们向redux出发吧。

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