如果在移动端的话,由于移动端操作相对比较单一,因此loading形式也比较简单。通常做法是在请求发出时页面正中位置弹出一个loading的 toast,请求结束隐藏toast 。 这种做法大家接受度比较高,实现起来也比较简单,就不赘述了。
接下来谈一下web端,由于pc强大的计算能力和相对大的屏幕,给用户很大的操作空间,因此出现了很多种loading状态。 比如页面级别的loading(github顶部的loading bar),组件级别loading(比如一个按钮,一个placeholder)。
我们先来分析下需求:
1.我们希望可以控制loading 的时机。
2.我们希望新增一个loading需求,不需要写很多代码
3. 我们不希望保存loading这样的业务无关状态(状态最好都别保存)
使用起来大概是这样子的:
(页面级别,组件级别通用)
基础版:
<Loading isloading={props.isloading} > <HelloWorld>123</HelloWorld> </Loading>
标准版:
可以根据请求自动loading,需要结合redux-promise等实现。
具体来说就是在请求是dispatch一个action:
{ type:"xxx",payload: "xxxx",Meta: { requestId: 233 } }
这样我们可以针对请求实现对应的loading(isloading 为true, requestId 不生效)
<Loading isloading={props.isloading} requestIds={[233,666,999]} > <HelloWorld>123</HelloWorld> </Loading>
典藏版:
可以实现诸如 顶部progress bar,菊花转动,自定义文字以及图标,显示百分比等功能(百分比基于requestsIds实现, 效果更逼真,个人觉得比微信的逼真)
<Loading mode="overlay" // overlay (default)/ progress showPercents={true} // make sense only in progress mode (default is false) spining={true} icon={<Icon type="loading" />} isloading={props.isloading} requestIds={[233,999]} > <HelloWorld>123</HelloWorld> </Loading>
具体实现呢? 戳这里https://github.com/azl397985856/react-loading/tree/master