基于 taro 到一个简单易用的骨架屏组件
- 微信小程序
- h5
- 其它平台未测试
import Skeleton from 'taro-skeleton'
通过title
属性显示标题占位图,通过row
属性配置占位段落行数
<Skeleton title row={3} />
通过avatar
属性显示头像占位图
<Skeleton title avatar row={3} />
通过type
属性来控制排列方式,默认值为 row
,可选column
<Skeleton type='column' title titleWidth={'80%'} avatar />
将loading
属性设置成false
表示内容加载完成,此时会隐藏占位图,并显示Skeleton
的子组件
<Skeleton
title
avatar
row={3}
loading={loading}
>
<Text>实际内容</Text>
</Skeleton>
export default class Index extends Component {
state = {
loading: false
}
render () {
return (
<View className='index'>
<Skeleton loading={this.state.loading} title avatar row={2} action></Skeleton>
</View>
)
}
}
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
type | 定义排列方式 | row/column |
row |
1.0.12 |
row | 段落占位图行数 | number |
0 |
- |
row-width | 段落占位图宽度,可传数组来设置每一行的宽度 | number/string/number[]/string[] |
100% |
- |
row-height | 段落占位图高度,可传数组来设置每一行的高度 | number/string/number[]/string[] |
24 |
1.0.7 |
rowProps | 用于定制 row 的宽跟高,可传数组来设置每一行的宽跟高,如果配置了该属性,则 row-height 配置无效 | RowProps/RowProps[] |
- | 1.0.7 |
title | 是否显示标题占位图 | boolean |
false |
- |
title-width | 标题占位图宽度 | number/string |
40% |
- |
avatar | 是否显示头像占位图 | boolean |
false |
- |
avatar-size | 头像占位图大小 | number/string |
90 |
- |
avatar-shape | 头像占位图形状,可选值为square |
string |
round |
- |
action | 显示右边操作按钮占位图 | boolean |
false |
- |
loading | 是否显示占位图,传false 时会展示子组件内容 |
boolean |
true |
- |
animate | 是否开启动画 | boolean |
true |
- |
animateName | 动画类型,可选值为elastic |
string |
blink |
1.3.9 |
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
width | 段落占位图宽数 | number/string |
- | - |
height | 段落占位图高度 | number/string |
- | - |