骨架屏-526互联

简介

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

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

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

编写骨架屏组件
引入骨架屏组件

编写骨架屏组件

手写

手机骨架屏组件，其实就是使用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>
  `
});

参考