1.0.2 • Published 3 years ago
@mas.io/mas-loader v1.0.2
mas-loader
Badges
行业小程序mas-loader组件，主要解决页面请求管理问题。
- 无需手动管理设置加载状态，通过onFetch方法返回的Promise统一管理。
- 只有当组件处于可见状态时，才会触发加载，即使手动进行刷新。
install
tnpm install --save @alipay/mas-loaderprops
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| now | N | number | 主要用于触发refresh，使组件重新触发fetch事件，也可通过refresh方法直接调用触发 | Date.now() | |
| onFetch | Y | Promise | 组件触发fetch事件时设置 | return Promise.resolve() | |
| className | N | string | 同常规组件的class |
methods
| 方法 | 方法说明 |
|---|---|
| refresh | 手动调用refresh方法触发fetch事件 |
slots
| 方法 | 方法说明 | 默认值 |
|---|---|---|
| default | 当完成加载并且成功时显示的内容 | |
| loading | 可设置加载时的内容显示 | mini-ali-ui/loading |
| error | 设置失败时的内容显示 | mini-ali-ui/page-result |
usage
{
"usingComponents": {
"mas-loader": "@alipay/mas-loader/es/index"
}
}<mas-loader onFetch="onFetch">
<view a:for="{{ list }}">{{ item }}</view>
</mas-loader>onFetch() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() < 0.5 ? resolve, reject, 3000);
}).then(() => {
this.setData({list: new Array(10).fill(0).map(() => Math.random())})
})
}1.0.2
3 years ago