骨架屏是页面加载时的占位结构，用于提升用户体验。它通过展示页面“轮廓”减少用户等待焦虑，尤其在网络差或数据量大的场景下效果显著。在uni-app中，可通过手动实现或插件生成两种方式创建骨架屏。手动实现步骤包括：1. 在template中添加条件判断控制显示；2. 使用view和image模拟页面结构；3. 样式上使用灰色背景和圆角模仿内容区域；4. 数据加载完成后隐藏骨架屏。插件方式如uni-skeleton则提供自动识别结构、动画效果、多端适配等功能，使用更高效但可能需调整配置以匹配复杂布局。优化骨架屏的关键点包括：1. 控制展示时间在2秒内；2. 设置最小展示时间避免频繁切换；3. 结合预加载机制缩短停留时间；4. 根据设备性能动态处理骨架结构；5. 区分首次加载与刷新行为。合理应用这些策略可避免骨架屏反成累赘，从而真正提升用户体验。
骨架屏在uni-app中已经不是一个新鲜话题，但很多人用得并不够精细。它本质上是一个页面内容的占位结构，在真实数据加载完成前展示一个“轮廓”，让用户感知到页面正在加载而不是卡顿。这对提升用户体验非常关键，尤其是在网络较差或者数据量大的场景下。
什么是骨架屏，为什么需要它？
骨架屏（Skeleton Screen）是一种过渡界面，通常是一些简单的矩形和线条组成的页面结构图。它的作用是让用户看到页面的大致布局，而不是一片空白或 loading 动画。这种设计能有效减少用户等待时的焦虑感。
在 uni-app 中，骨架屏可以手动实现，也可以借助一些插件来快速生成。如果你的 App 页面加载时间超过1秒，建议一定要加上骨架屏。特别是在电商类、资讯类等信息密集型应用中，骨架屏几乎是标配。
如何手动创建骨架屏？
手动方式适合对页面结构比较熟悉的开发者，也便于后期优化调整。基本思路就是：在真实数据加载完成前，显示一个模拟页面结构的视图。
实现步骤如下：
- 在页面的 template 中添加一个条件判断，控制是否显示骨架屏；
- 使用简单的 view 和 image 模拟出页面的基本结构；
- 样式上使用灰色背景 + 圆角，模仿内容区域；
- 数据加载完成后隐藏骨架屏。
示例代码结构大致如下：
<template>
<view>
<view v-if="loading" class="skeleton">
<!-- 模拟标题 -->
<view class="skeleton-title"></view>
<!-- 模拟内容段落 -->
<view class="skeleton-content"></view>
</view>
<view v-else>
<!-- 真实内容 -->
</view>
</view>
</template>
<style>
.skeleton-title {
width: 60%;
height: 30px;
background-color: #e0e0e0;
border-radius: 4px;
}
.skeleton-content {
width: 100%;
height: 100px;
background-color: #f0f0f0;
border-radius: 4px;
}
</style>
这种方式虽然简单，但灵活性强，可以根据不同页面定制不同的骨架结构。
如何通过插件快速生成骨架屏？
如果你希望节省开发时间，uni-app 社区有一些现成的骨架屏插件可用。比如 uni-skeleton 或者某些基于 Vue 的骨架组件封装版本。
这类插件通常提供以下功能：
- 自动识别页面元素结构，生成骨架；
- 支持动画效果（如闪烁）；
- 可控的显示/隐藏时机；
- 适配多端表现一致；
使用方式一般是安装插件后，在页面引入组件，并设置是否启用即可。例如：
<template> <view> <uni-skeleton :loading="loading" /> <view v-if="!loading"> <!-- 页面内容 --> </view> </view> </template>
不过要注意的是，插件生成的骨架结构可能不够精准，尤其在复杂布局中容易出现错位或样式不匹配的问题，需要适当调整配置或自定义模板。
骨架屏加载优化的关键点
骨架屏本身只是一个视觉上的过渡，但如果加载逻辑不合理，反而会影响体验。以下是几个优化建议：
- 控制骨架屏的展示时间：不要让它持续太久，一般建议在 2 秒内切换为真实内容，否则用户会觉得页面卡住；
- 避免频繁切换：如果数据请求很快完成，可以设置一个最小展示时间（比如 500ms），防止一闪而过影响观感；
- 结合预加载机制：在进入页面前做一些数据预拉取，缩短骨架屏停留时间；
- 根据设备性能动态处理：低端设备可以简化骨架结构，加快渲染速度；
- 区分首次加载与刷新行为：刷新时可以不展示骨架屏，因为用户已经知道内容会更新。
这些细节做不好，骨架屏就变成了累赘。比如有些 App 明明数据早就加载好了，骨架屏还在闪，这就是没有合理控制生命周期的表现。
基本上就这些。骨架屏不是什么高深技术，但它确实能在细节上提升用户体验。手动实现灵活可控，插件方式省事高效，根据项目需求选择合适的方式就好。
暂无评论内容