vue实现骨架屏的示例

Vue实现骨架屏的示例攻略

1. 什么是骨架屏？

骨架屏是一种用于优化用户体验的页面加载效果。它会先展示一个简单的页面结构，给用户一种页面正在加载的感觉，同时也提供了一种参照，让用户知道具体内容将要填充到哪个位置上。

2. 实现步骤

2.1 创建Vue项目

首先，我们需要创建一个Vue项目。可以使用Vue CLI来快速搭建项目结构。在命令行中执行以下命令：

vue create skeleton-screen-demo

按照提示进行相关配置，等待项目创建完成。

2.2 安装相关依赖

在项目根目录下，执行以下命令安装 vue-skeleton-webpack-plugin 和 skeleton-screen-css 插件：

npm install vue-skeleton-webpack-plugin skeleton-screen-css --save

2.3 配置webpack插件

打开项目根目录下的 vue.config.js 文件，添加以下代码：

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

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('skeleton').use(SkeletonWebpackPlugin, [{
        webpackConfig: {
          entry: {
            app: path.resolve(__dirname, './src/skeleton.js'), // 骨架屏入口文件
          },
        },
        minimize: true,
        quiet: true,
      }]);
    }
  },
};

2.4 创建骨架屏组件

在 src 目录下创建 skeleton.js 和 components 文件夹。在 components 文件夹中创建 SkeletonScreen.vue 文件，用于定义骨架屏组件的内容。

<template>
  <div class="skeleton-screen">
    <!-- 以下为示例骨架屏结构 -->
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <!-- End -->
  </div>
</template>

<style scoped>
.skeleton-screen {
  /* 骨架屏容器样式 */
}

.skeleton-block {
  /* 骨架屏条块样式 */
}
</style>

2.5 使用骨架屏组件

打开 src/App.vue 文件，将以下示例代码添加到模板中：

<template>
  <div id="app">
    <!-- 正常页面内容 -->
    <h1>Hello World!</h1>
    <p>这是一个骨架屏示例。</p>
    <!-- 骨架屏插槽 -->
    <SkeletonScreen v-if="showSkeleton" />
    <!-- End -->
  </div>
</template>

<script>
import SkeletonScreen from './components/SkeletonScreen.vue'

export default {
  name: 'App',
  components: {
    SkeletonScreen
  },
  data() {
    return {
      showSkeleton: true // 控制是否显示骨架屏
    }
  },
  created() {
    // 模拟接口请求延迟，展示骨架屏
    setTimeout(() => {
      this.showSkeleton = false;
    }, 3000);
  }
}
</script>

2.6 样式美化

根据实际需求，可以自定义骨架屏的样式。在 SkeletonScreen.vue 文件中，通过修改 .skeleton-screen 和 .skeleton-block 样式来自定义骨架屏的容器和条块样式。

3. 示例说明

示例1：简单骨架屏

在 SkeletonScreen.vue 文件的模板中，添加多个 <div class="skeleton-block"></div> 来构建骨架屏的条块。每个 .skeleton-block 表示一个骨架屏条块。

<template>
  <div class="skeleton-screen">
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
  </div>
</template>

<style scoped>
.skeleton-block {
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}
</style>

示例2：复杂骨架屏

在示例1的基础上，可以添加更多骨架屏条块，来模拟真实页面的结构。可以根据页面布局需要，设置不同的宽度、高度、间距和背景颜色。

<template>
  <div class="skeleton-screen">
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block big"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block"></div>
    <div class="skeleton-block big"></div>
    <div class="skeleton-block"></div>
  </div>
</template>

<style scoped>
.skeleton-block {
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}

.big {
  height: 40px;
}
</style>

4. 运行项目

执行以下命令来运行项目：

npm run serve

打开浏览器，访问 http://localhost:8080 ，即可看到骨架屏的效果。

以上就是使用Vue实现骨架屏的示例攻略。根据实际需求，可以自定义骨架屏的样式和结构，以增加用户体验。希望对你有帮助！如果还有其他问题，请随时提出。