骨架屏

简介

骨架屏本质上就是页面的loading，与一般loading不同的是，它是页面初始化的loading，而不是某个操作的loading（比如接口请求时显示的loading）。

技术实现上也没有特别高大上，就是得自己编写一个骨架屏组件（有的方案可以自动根据页面生成，但稍微看了下，觉得不好），然后在页面数据未加载完时显示骨架屏，加载完后隐藏骨架屏。

使用骨架屏包含两个步骤：

1. 编写骨架屏组件
2. 引入骨架屏组件

编写骨架屏组件

手写

手机骨架屏组件，其实就是使用css3动画来实现的。下面是给出一些实例：

@keyframes loading {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.skeleton {
  background: #f2f2f2;
  animation: loading 0.5s infinite alternate;
}

@keyframes loading {
  from {
    background-position: 200% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

.skeleton {
  animation: loading 2s linear infinite;
  background-image: linear-gradient(
    50deg,
    #e8e7e7,
    #e8e7e7 52%,
    #f1f1f1 55%,
    #e8e7e7 58%,
    #e8e7e7
  );
  background-size: 200% 100%;
}

使用VueContentLoader

vue-content-loader提供了很多的骨架屏组件，我们可以直接拿来用。

npm install vue-content-loader -S

import {   
  ContentLoader,
  FacebookLoader,
  CodeLoader,
  BulletListLoader,
  InstagramLoader,
  ListLoader 
} from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  }
}

引入骨架屏

直接插入

即直接在vue文件中插入骨架屏组件。

使用SkeletonWebpackPlugin

单页

• vue.config.js

  const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
  module.exports = {
    // vue骨架屏插件配置
    configureWebpack: {
      plugins: [
        new SkeletonWebpackPlugin({
          webpackConfig: {
            entry: {
              app: path.join(__dirname, './src/components/skeleton-entry.js'),
            },
          },
          minimize: true,
          quiet: true,
        })
      ]
    }
  }
  

• components/skeleton-entry.js

  import Vue from 'vue';
  import HomeSkeleton from './HomeSkeleton';
  
  export default new Vue({
    components: {
      HomeSkeleton
    },
    template: '<HomeSkeleton />'
  });
  

• components/HomeSkeleton.vue：首页骨架屏组件。

多页

• vue.config.js

  const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
  module.exports = {
    // vue骨架屏插件配置
    configureWebpack: {
      plugins: [
        new SkeletonWebpackPlugin({
          webpackConfig: {
            entry: {
              app: path.join(__dirname, './src/components/skeleton-entry.js'),
            },
          },
          minimize: true,
          quiet: true,
          router: {
            mode: 'hash',
            routes: [
              {
                path: '/about',
                skeletonId: 'skeleton1'
              },
              {
                path: '/',
                skeletonId: 'skeleton2'
              },
            ]
          }
        })
      ]
    }
  }
  

• components/skeleton-entry.js

  import Vue from 'vue';
  import Skeleton1 from '@/components/skeleton/Skeleton1';
  import Skeleton2 from '@/components/skeleton/Skeleton2';
  export default new Vue({
    components: {
      Skeleton1,
      Skeleton2
    },
    template: 
    `
    <div>
          <skeleton1 id="skeleton1" style="display:none"/>
          <skeleton2 id="skeleton2" style="display:none"/>
    </div>
    `
  });
  

参考

1. 什么是骨架屏？
2. vue中实现骨架屏的多种方式
3. Vue Content Loader