如果在移动端的话,由于移动端操作相对比较单一,因此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,666,999]}
>
<HelloWorld>123</HelloWorld>
</Loading>
具体实现呢? 戳这里 https://github.com/azl397985856/react-loading/tree/master