低代码高性能原生UI框架Skeleton 骨架屏
组件类型：UxSkeletonComponentPublicInstance
支持头像占位、辉光效果
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| loading | Boolean | true | 是否显示骨架占位图，设置为false将会展示子组件内容 |
| animate | Boolean | true | 是否开启动画效果 |
| duration | Number | 1500 | 动画间隔 单位ms |
| rows | String[] | 100% | 段落占位图行数, 值是宽度 |
| height | Number[] | [18] | 段落高度 |
| spacing | Number | 5 | 段落间隔 |
| avatar | Number | 32 | 显示头像 |
| avatarWidth | Number | 32 | 头像宽度 |
| avatarHeight | Number | 32 | 默认 |
| shape | String | square | 头像占位图的形状 |
| background | String | #e9e9e9 | 背景色 |
shape
| 值 | 说明 |
|---|---|
| circle | 圆形 |
| square | 方形 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="骨架屏" :bold="true">
<ux-text text="支持头像占位、辉光效果"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="骨架屏" text="https://www.uxframe.cn/component/layout/skeleton.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="动态切换状态" :bold="true">
<template #subtitle>
<ux-switch :checked="loading" @change="change"></ux-switch>
</template>
<ux-skeleton :loading="loading" :rows="['100%', '60%', '40%']">
<ux-col>
<ux-text text="我是第1行数据" :lineHeight="1.6"></ux-text>
<ux-text text="我是第2行数据" :lineHeight="1.6"></ux-text>
<ux-text text="我是第3行数据" :lineHeight="1.6"></ux-text>
</ux-col>
</ux-skeleton>
</ux-card>
<ux-card direction="column" icon="arrowright" title="头像" :bold="true">
<ux-text text="支持头像占位" :mb="15"></ux-text>
<ux-skeleton :loading="true" :avatar="true" shape="circle" :height="[20, 30, 50]" :rows="['100%', '100%', '100%']"></ux-skeleton>
</ux-card>
<ux-card direction="column" icon="arrowright" title="关闭辉光" :bold="true">
<ux-text text="支持关闭辉光效果" :mb="15"></ux-text>
<ux-skeleton :loading="true" :animate="false" :avatar="true" :avatarWidth="65" :avatarHeight="65" :rows="['100%', '60%', '40%']"></ux-skeleton>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="骨架屏" :bold="true">
<ux-text text="支持头像占位、辉光效果"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="骨架屏" text="https://www.uxframe.cn/component/layout/skeleton.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="动态切换状态" :bold="true">
<template #subtitle>
<ux-switch :checked="loading" @change="change"></ux-switch>
</template>
<ux-skeleton :loading="loading" :rows="['100%', '60%', '40%']">
<ux-col>
<ux-text text="我是第1行数据" :lineHeight="1.6"></ux-text>
<ux-text text="我是第2行数据" :lineHeight="1.6"></ux-text>
<ux-text text="我是第3行数据" :lineHeight="1.6"></ux-text>
</ux-col>
</ux-skeleton>
</ux-card>
<ux-card direction="column" icon="arrowright" title="头像" :bold="true">
<ux-text text="支持头像占位" :mb="15"></ux-text>
<ux-skeleton :loading="true" :avatar="true" shape="circle" :height="[20, 30, 50]" :rows="['100%', '100%', '100%']"></ux-skeleton>
</ux-card>
<ux-card direction="column" icon="arrowright" title="关闭辉光" :bold="true">
<ux-text text="支持关闭辉光效果" :mb="15"></ux-text>
<ux-skeleton :loading="true" :animate="false" :avatar="true" :avatarWidth="65" :avatarHeight="65" :rows="['100%', '60%', '40%']"></ux-skeleton>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import { UXSwitchEvent } from '@/uni_modules/ux-frame/libs/types/types.uts';
let title = ''
const loading = ref(false)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function change(e: UXSwitchEvent) {
loading.value = e.value
}
</script><script setup>
import { UXSwitchEvent } from '@/uni_modules/ux-frame/libs/types/types.uts';
let title = ''
const loading = ref(false)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function change(e: UXSwitchEvent) {
loading.value = e.value
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>