更新记录

1.0.0（2026-07-15）

1.0.0

支持文本流光、列表、宫格、瀑布流等预设，适配 Android、iOS、鸿蒙。（支持蒸汽模式，蒸汽模式建议用hbuilderx alpha 5.21+）

平台兼容性

uni-app x(5.21)

una-app-skeleton

una-app-skeleton 是一个面向 uni-app x 的骨架屏组件，核心使用 uvue 实现，适合 App Android、iOS、鸿蒙端的首屏加载、模块加载和长列表占位。

特性

• 支持 banner、info、text、menu、list、waterfall、custom 多种预设
• 支持文本长条从左到右的窄流光动画，动画由 UTS 定时器驱动，不使用 @keyframes
• 支持动画开关，animated=false 时展示静态骨架屏
• 支持包裹真实内容：loading=false 时自动渲染默认插槽
• 支持 scroll-view 页面首屏骨架
• 长列表分页场景可只用于首屏加载，不接管分页逻辑
• 避免 @keyframes、row-gap、rpx、100vh 等 App uvue CSS 易报错写法

基础用法

<template>
    <una-app-skeleton :loading="loading" preset="list" :rows="2">
        <view v-for="item in list" :key="item.id">
            <text>{{ item.title }}</text>
        </view>
    </una-app-skeleton>
</template>

<script setup lang="uts">
const loading = ref<boolean>(true)
const list = ref<Array<any>>([])

onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1200)
})
</script>

预设类型

<una-app-skeleton preset="banner" bannerHeight="118px" />
<una-app-skeleton preset="info" :paragraphLines="3" />
<una-app-skeleton preset="text" :textLines="4" />
<una-app-skeleton preset="menu" :menuCount="8" />
<una-app-skeleton preset="list" :rows="2" thumbnailPosition="left" />
<una-app-skeleton preset="waterfall" :waterfallRows="2" />
<una-app-skeleton preset="custom" :customCount="4" />

动画控制

<una-app-skeleton preset="list" mode="flow" :animated="true" />
<una-app-skeleton preset="list" mode="none" :animated="false" />

当前流光动画只作用在文本长条形骨架上，例如文本段落、列表标题、列表描述、菜单文字、瀑布流文字等。图片块、头像、图标等区域保持静态底色，避免加载态过度闪烁。

Props

分页建议

骨架屏建议只用于首屏空列表加载：

const firstLoading = ref<boolean>(true)
const loadingMore = ref<boolean>(false)

已有列表数据后加载下一页时，保留真实列表，只在底部显示“加载中”。不要分页时整页切回骨架，否则会闪屏。

兼容说明

• 基于 uni-app x / uvue
• 样式单位使用 px
• 未使用 @keyframes
• 未使用 linear-gradient
• 未使用 100vh
• 未使用 display: block
• 适合 App Android、iOS、鸿蒙端使用