LoadingIndicator 加载中指示器
一个loading的动画组件,可以自定义帧动画。
推荐一个图片帧合并工具PngMergeHelper,可以把多个图片合并为一个帧序列图。
平台
| App | 小程序 | H5 |
|---|---|---|
| √ | √ | √ |
属性
| 属性名 | 类型 | 默认值 | 说明 | 平台 |
|---|---|---|---|---|
| width | Number,String | 34rpx | All | |
| height | Number,String | 34rpx | All | |
| play | Number,String | auto | 值不为auto时,为list组件下拉距离 | All |
| speed | Number,String | null | play=auto时播放速度,单位ms,默认值25 | 非图片720 |
| threshold | Number,String | 45 | play!=auto时,用于计算帧、位置和动画播放速度,值为list组件的downOption.offset值 | All |
| type | String | loading-snowflake | 指示器类型 可选的值 loading-semicircle、loading-snowflake、img、frameImg | All |
| img | String,Object | null | 图片,type=img和frameImg时有效 为object时为帧序列图片,格式遵循uni.$c.uriFilter()的配置 | All |
| color | String | #666666 | 指示器颜色,img=false不存在时有效 支持c-t- | All |
| imgWidth | Number,String | null | 以下配置在img存在时有效,且必填 图片宽高,单位px | All |
| imgHeight | Number,String | null | All | |
| frameCount | Number,String | null | 帧数 | All |
| frameWidth | Number,String | null | 帧宽高,单位px | All |
| frameHeight | Number,String | null | All | |
| loop | Boolean | true | 是否循环播放 | All |
| cClass | String,Array,Object | null | 组件类 | All |
| cStyle | String,Array,Object | null | 组件样式 | All |
| margin | String,Number,Array | null | 外边距 | All |
| padding | String,Number,Array | null | 内边距 | All |
| bgColor | String | null | 背景色,支持c-bg-开头的背景色类 | All |
插槽
| 插槽名 | 说明 | 平台 |
|---|---|---|
| default | type不等于图片地址时,可以自定义loading图标 | All |
示例
vue
<template>
<c-loading-indicator
type="/static/img/loading.png"
imgWidth="300"
imgHeight="800"
frameCount="48"
frameWidth="32"
frameHeight="32"
/>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
