uniapp骨架

uniapp骨架屏实现方法

全局配置骨架屏 在pages.json中配置页面预载样式，适用于首次加载等待场景：

"globalStyle": {
  "skeleton": "enable",
  "loading": {
    "title": "加载中...",
    "color": "#666"
  }
}

自定义组件实现 通过uni-skeleton组件动态控制占位区块：

<template>
  <view>
    <uni-skeleton v-if="loading" :rows="3" animate />
    <real-content v-else />
  </view>
</template>

CSS动画方案 使用纯CSS实现动态渐变效果：

.skeleton-item {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

性能优化建议

• 对长列表使用虚拟滚动技术配合骨架屏
• 关键内容优先加载后立即隐藏骨架元素
• 避免复杂DOM结构导致渲染性能下降
• 使用v-show替代v-if减少组件重建开销

第三方组件推荐

1. uView UI的骨架屏组件支持复杂布局预设
2. mescroll-uni内置分页加载骨架效果
3. uni-skeleton插件提供多种动画模式选择

实际项目中可根据具体场景选择实现方案，通常推荐组合使用全局配置与组件级控制以达到最佳用户体验。