uni-app骨架屏不能直接用vue组件库方案，因跨端下v-show/v-if对slot和动画支持不一致，且依赖dom操作或css变量在小程序/app端失效；需手写view+animation轻量方案，统一class、用rpx适配、避免opacity动画，专注状态管理与真机调试。
uni-app 中 Skeleton 骨架屏为什么不能直接用 Vue 组件库的方案
因为 uni-app 的跨端特性，v-show、v-if 在小程序平台对 slot 和过渡动画支持不一致，且多数 UI 库（如 Element Plus、Ant Design Vue）的 Skeleton 组件依赖 DOM 操作或 CSS 自定义属性，在微信小程序、App 端会失效或渲染异常。直接引入会报 Cannot read property 'appendChild' of undefined 或骨架不随数据加载完成自动隐藏。
用 view + animation 手写轻量级骨架屏
核心思路：用固定结构的 view 占位，通过 animation 控制背景渐变闪烁，再用 v-if 切换真实内容与骨架。关键点在于动画必须用 uni.createAnimation 或 CSS 动画，避免使用 Web-only 的 @keyframes 语法（H5 可用，但小程序需转译）。
- 骨架容器统一加
class="skeleton-wrapper"，内部用view模拟头像、标题、段落——例如：<view class="skeleton-avatar"></view> - CSS 动画推荐用
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%+animation: loading 1.5s infinite - 微信小程序中
@keyframes必须写在<style></style>标签顶层，不能嵌套；H5/APP 端可放心使用 - 不要用
opacity动画控制显示/隐藏——会导致骨架区域仍占布局流，建议用v-if="!loaded"彻底卸载
uni.showLoading 和骨架屏能一起用吗
不能混用。二者定位不同：uni.showLoading 是全屏蒙层式提示，而骨架屏是局部占位渲染。同时调用会导致视觉冲突，且 uni.hideLoading() 不会触发骨架屏的 v-if 更新。正确做法是：只用骨架屏，配合请求状态管理。
- 定义响应式变量
loading: true，请求开始设为true，then或finally中设为false - 避免在
onLoad里直接写异步请求却不设 loading 状态，否则骨架可能一闪而过或根本不出现 - 如果接口极快（setTimeout 延迟隐藏骨架，防止“闪屏”——例如：
setTimeout(() => this.loading = false, 300)
如何让骨架屏适配不同屏幕宽度和字体大小
uni-app 的 rpx 对骨架元素宽度/高度有效，但动画背景尺寸和圆角需额外处理。尤其头像类 skeleton-avatar 在 iPhone 和安卓小屏上容易被压缩变形。
- 头像统一用正方形
width: 64rpx; height: 64rpx;，border-radius: 50%，避免用%或em - 段落行高用
line-height: 48rpx，避免文字撑开骨架高度 - 字体大小统一用
font-size: 28rpx，禁用rem或系统字号缩放（小程序端不响应page-meta的page-style字号设置） - 真机调试时重点看微信 iOS 客户端——其 WebView 对
background-size渲染有轻微偏移，可加transform: translateZ(0)强制硬件加速修复
v-if 切换时机不对。多打几次 console.log 看 loading 状态变化时机，比调样式更管用。
