前端中骨架屏的三种运用方式介绍

<!-- 电商商品详情页案例 -->
<div class="skeleton-container">
  <div class="skeleton-header"></div>
  <div class="skeleton-gallery">
    <div class="skeleton-image"></div>
    <div class="skeleton-thumbnails">
      <div class="skeleton-thumb"></div>
      <div class="skeleton-thumb"></div>
    </div>
  </div>
  <div class="skeleton-content">
    <div class="skeleton-line" style="width:80%"></div>
    <div class="skeleton-line" style="width:60%"></div>
  </div>
</div>

<style>
.skeleton-image {
  background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 50%,#f2f2f2 75%);
  animation: shimmer 1.5s infinite;
  height: 300px;
}
@keyframes shimmer {
  to { background-position-x: -200%; }
}
</style>

// Vue动态骨架屏组件
<template>
  <div v-if="loading" class="skeleton-wrapper">
    <SkeletonItem v-for="i in 5" :key="i" 
      :width="i===1 ? '80%' : '100%'" 
      :height="i===1 ? '24px' : '16px'"/>
  </div>
  <div v-else>
    <ActualContent :data="contentData"/>
  </div>
</template>

<script>
export default {
  components: {
    SkeletonItem: {
      props: ['width','height'],
      template: `<div class="skeleton-item" :style="{width, height}"/>`
    }
  }
}
</script>

// 使用vue-skeleton-webpack-plugin
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: './src/skeleton.js'
        },
        minimize: true,
        quiet: true
      })
    ]
  }
}

// 鸿蒙APP中的状态管理案例
Page({
  data: {
    loading: true,
    error: false,
    empty: false
  },
  onLoad() {
    fetchData().then(res => {
      this.setData({ 
        loading: false,
        list: res.data || []
      });
    }).catch(() => {
      this.setData({ error: true });
    });
  }
})