uni-app中Skeleton组件需用v-if控制显示、onShow设loading=true、请求发出即显、响应后统一设false；删微信骨架屏三类代码；border-radius用calc()、背景用rgba或主题适配；动画优先transform；慎用App端animation；uni-skeleton插件selector须填真实class名且确保DOM已挂载。
uni-app里用CSS动画写Skeleton组件，关键在v-if和loading状态控制
直接用v-if控制显示比v-show更稳妥——前者彻底卸载DOM，避免小程序里残留占位导致布局错乱；后者只是隐藏，容易和真实内容重叠或触发渲染异常。
常见错误是把loading设在data里但没在生命周期里及时更新：比如只在onLoad设true，但从tabBar切回来时onLoad不触发，骨架就出不来。正确做法是统一在onShow里设this.loading = true，请求发起后立刻赋值，而不是等success回调才设false——否则骨架一闪即逝，起不到占位作用。
-
onShow中设loading = true，覆盖所有页面可见场景（含后台切回、tab切换） - 网络请求
uni.request发出后立即设loading = true，不是等响应才设 - 响应成功/失败后统一设
loading = false，避免遗漏fail分支 - 如果用Vuex管理状态，确保
commit同步触发，别依赖异步action延迟更新
微信开发者工具生成的骨架屏，粘贴到uni-app要删三类代码
微信开发者工具点“生成骨架屏”后导出的wxml/wxss，不能直接扔进.vue文件里跑。不清理会报错或样式崩坏，尤其在App端或H5端。
必须手动删掉这三类东西：
- 所有带
is="xxx"的属性，比如<view is="components/page">或<template is="skeleton">——uni-app不支持这种模板语法 - 所有
data-event-opts这类微信私有属性，uni-app编译器不认识 - 所有相对路径图片引用，如
src="../../static/xxx.png"，改成base64或绝对路径，或直接用<view class="skeleton-avatar"></view>纯色块替代
删完后，把wxss内容全拷进<style scoped>里，再把wxml结构套进<template>，就是一个可用的Skeleton.vue组件。
自定义Skeleton组件里，border-radius和background值不能写死
不同平台对rpx单位解析有差异，尤其iOS App端和部分安卓机型，写死10rpx可能太尖或太钝。更稳妥的是用upx配合calc()动态算，比如border-radius: calc(4rpx + 1px)。
灰色背景别用固定#f0f0f0——深色模式下会刺眼。建议用rgba(200, 200, 200, 0.3)，透明度留余地；或者绑定:style="{ backgroundColor: isDark ? '#333' : '#f5f5f5' }"做主题适配。
- 动画用
transform: translateX()比left更流畅，避免触发布局重排 - 避免在Skeleton里用
height: auto，小程序不支持，必须设具体数值或min-height - App端慎用
animation，某些低端机卡顿明显，可加v-if="!isApp"条件关闭
用uni-skeleton插件时，selector参数容易配错
插件文档说“传入选择器”，但实际要填的是你页面里真实DOM的class名，不是组件名。比如你页面里有个<view class="content-list">，那selector就得写".content-list"，而不是"content-list"或"ContentList"。
常见坑是：selector指向的元素还没挂载就初始化插件，导致骨架没生效。解决方案是把<uni-skeleton>放在页面最外层<view>里，并用v-if="showSkeleton"包裹，等onReady之后再设true。
- 插件默认动画时长是1200ms，如果接口平均耗时800ms，骨架会提前消失——改
duration参数匹配业务节奏 - 多列表页慎用自动识别，
selector最好精确到某一块区域，否则整个页面被占满 - H5端若出现闪烁，关掉
animate属性，用静态占位更稳
