前言

推荐一个写博客的效率工具 🔧
CSDN AI数字营销会员，核心功能：
✅ 多平台一键同步 → 一次发文，同步6个平台
✅ 全维度数据监测 → 所有平台数据一个面板看
✅ 营销组件 → 文末合规放公众号/产品推广
✅ GEO检测 → 看你文章在AI平台的曝光情况
对我这种多平台发文的人来说，光同步功能就值回票价了。
写博客的朋友可以看看👇
https://mp.csdn.net/vip?utm_source=fx-blog-qq_45954390

在 App 页面开发中，列表、用户信息、轮播图、菜单宫格、瀑布流等模块经常需要等待接口返回。如果页面直接空白等待，会让用户感觉页面卡顿；如果每个业务页面都单独写一套加载占位，又会增加重复代码和维护成本。

una-app-skeleton 是一个基于 uni-app x / uvue 的骨架屏组件，主要用于 App Android、iOS、鸿蒙端的首屏加载、模块加载和长列表占位。组件内置多种常见骨架屏预设，并支持文本长条流光动画，让加载态更自然。

当前插件是 uni-app x 前端组件，不是原生 UTS 插件。发布到 DCloud 插件市场时建议选择：前端组件 / vue组件。

一、插件介绍

快速通道: una-app-skeleton骨架屏（适配蒸汽模式）

una-app-skeleton 是一个适用于 uni-app x 的骨架屏组件，核心使用 uvue 实现。它可以用于页面首屏加载、卡片模块加载、列表加载、瀑布流加载等场景。

组件支持使用默认插槽包裹真实内容。当 loading=true 时显示骨架屏；当 loading=false 时自动渲染真实内容。

购买前，可以先试用一下。

1.✨ 特性

• 支持 banner、info、text、menu、list、waterfall、custom 多种骨架屏预设
• 支持文本长条从左到右的窄流光动画
• 支持动画开关，animated=false 时展示静态骨架屏
• 支持 loading=false 后自动渲染默认插槽内容
• 支持 scroll-view 页面中的首屏骨架屏
• 适合长列表首页加载、酒店列表、订单列表、用户信息卡片等业务场景
• 样式使用 px 单位，减少 App uvue CSS 编译兼容问题
• 避免使用 @keyframes、linear-gradient、100vh、display:block、row-gap 等 App uvue 中容易报错的写法
• 适配 App Android、iOS、鸿蒙端

2. Props 参数

参数	说明	类型	默认值
loading	是否显示骨架屏	Boolean	true
preset	骨架预设，可选 banner / info / text / menu / list / waterfall / custom	String	list
rows	list 列表骨架行数	Number	2
card	是否使用白色卡片容器	Boolean	true
animated	是否启用流光动画	Boolean	true
mode	动画模式，可选 flow / none，兼容旧值 steam	String	flow
showTitle	是否显示骨架标题占位	Boolean	false
paragraphLines	info / list 文本行数	Number	3
textLines	text 文本段落行数	Number	4
menuCount	menu 宫格数量	Number	8
waterfallRows	waterfall 每列数量	Number	2
customCount	custom 自定义单元数量	Number	4
avatar	list 是否显示头像	Boolean	false
thumbnail	list 是否显示缩略图	Boolean	true
thumbnailPosition	缩略图位置，可选 left / right	String	left
avatarSize	头像尺寸	String	40px
menuIconSize	菜单图标尺寸	String	40px
thumbnailWidth	缩略图宽度	String	78px
thumbnailHeight	缩略图高度	String	78px
bannerHeight	banner 高度	String	118px
titleWidth	标题占位宽度	String	78px
titleHeight	标题占位高度	String	15px
lineHeight	文本占位高度	String	10px
gap	list 行间距	String	10px
radius	骨架块圆角	String	6px
baseColor	骨架基础色	String	#F0F2F5
highlightColor	流光高亮色	String	#FFFFFF

3. Events事件

当前版本暂无自定义事件。

组件主要通过 loading 控制显示状态：

<una-app-skeleton :loading="loading" preset="list">
	<view>
		<text>真实内容</text>
	</view>
</una-app-skeleton>

当接口请求完成后，将 loading 设置为 false 即可显示真实内容。

4. 插槽

组件提供默认插槽，用于放置真实业务内容。

<una-app-skeleton :loading="loading" preset="info">
	<view class="user-card">
		<text>用户信息内容</text>
	</view>
</una-app-skeleton>

说明：

• loading=true：展示骨架屏
• loading=false：展示默认插槽中的真实内容

二、插件使用示例

1. 下载路径

插件市场名称：

una-app-skeleton 骨架屏组件

插件 ID：

una-app-skeleton

也可以将插件放入项目的 uni_modules 目录中：

uni_modules/una-app-skeleton

2. 引入组件

将插件导入项目后，在 uvue 页面中可以直接使用：

<una-app-skeleton :loading="loading" preset="list" />

如果项目未自动识别组件，请确认插件目录结构是否正确：

uni_modules/una-app-skeleton/components/una-app-skeleton/una-app-skeleton.uvue

3. 基础列表骨架屏

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

<script setup lang="uts">
type ListItem = {
	id: number
	title: string
	desc: string
}

const loading = ref<boolean>(true)
const list = ref<ListItem[]>([])

onMounted(() => {
	setTimeout(() => {
		list.value = [
			{
				id: 1,
				title: "列表内容 1",
				desc: "接口返回后的真实内容"
			},
			{
				id: 2,
				title: "列表内容 2",
				desc: "骨架屏结束后自然展示"
			}
		]
		loading.value = false
	}, 1200)
})
</script>

4. 多种预设示例

banner 骨架屏

<una-app-skeleton preset="banner" bannerHeight="118px" />

info 个人信息骨架屏

<una-app-skeleton preset="info" :paragraphLines="3" avatarSize="40px" />

text 文本段落骨架屏

<una-app-skeleton preset="text" :textLines="4" />

menu 菜单宫格骨架屏

<una-app-skeleton preset="menu" :menuCount="8" menuIconSize="40px" />

list 列表骨架屏

<una-app-skeleton
	preset="list"
	:rows="2"
	:thumbnail="true"
	thumbnailPosition="left"
	thumbnailWidth="78px"
	thumbnailHeight="78px"
	:paragraphLines="3"
/>

waterfall 瀑布流骨架屏

<una-app-skeleton preset="waterfall" :waterfallRows="2" />

custom 自定义配置骨架屏

<una-app-skeleton preset="custom" :customCount="4" />

5. 动画开关

开启流光动画：

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

关闭流光动画：

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

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

6. 长列表分页建议

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

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

推荐逻辑：

<template>
	<una-app-skeleton :loading="firstLoading" preset="list" :rows="3">
		<scroll-view :scroll-y="true" @scrolltolower="loadMore">
			<view v-for="item in list" :key="item.id">
				<text>{{ item.title }}</text>
			</view>
			<text v-if="loadingMore">加载中...</text>
		</scroll-view>
	</una-app-skeleton>
</template>

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

7. 在 App Android、iOS、鸿蒙中的运行

本组件基于 uni-app x / uvue 实现，主要面向 App 端：

• Android：支持
• iOS：支持
• HarmonyOS：支持

样式上使用 px 单位，并规避了部分 App uvue CSS 编译限制：

• 不使用 100vh
• 不使用 display: block
• 不使用 row-gap
• 不使用 @keyframes
• 不使用 linear-gradient

三、其他插件文章

如果你也在做 uni-app 组件化开发，可以继续关注同系列插件：

1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper

快速通道

2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框

快速通道

3.【Uniapp 插件 una-upload-resource 】上传资源组件｜ 图片上传｜视频上传｜混传

快速通道

4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面，可导出指定尺寸与画质的图片，跨端兼容，适用于头像上传、图片裁切等业务场景。

快速通道

5.【Uniapp 插件 una-picker 】自定义样式选择器插件

快速通道

---

以上就是 una-app-skeleton 骨架屏组件的基础介绍和使用方式。组件定位比较轻量，适合在 uni-app x 项目中快速接入加载占位能力。