In our project, there were times when the side catalog bar was temporarily blank when the page was refreshed, probably because the request was sent but it took some time for the data to return to the rendered page. In this case, we could use skeleton screens to avoid this blank space and improve the user experience. Let’s take a look at manually encapsulating a skeleton screen.

Purpose: Encapsulate a skeleton screen component for better waiting during loading.

General steps:

  • Need a component to do placeholder use. The technical term for this placeholder component is the skeleton screen component.

    • Expose some attributes: height, width, background, whether there is a flash.

  • This is a common component that needs to be registered globally. It is recommended that such a component be defined in the vUE plug-in in the future.

  • Complete the left side classification skeleton effect with components.

Let’s take a look at what the skeleton screen looks like after implementation:







  1. Encapsulated components:src/components/library/shopping-skeleton.vue
<template> <! <div class="shop-skeleton" :style="{width,height}" :class="{shan:animated}"> <! - 1 box - > < div class = "block" : style = "{backgroundColor: bg}" > < / div > <! </div> </template> <script> export default {name: 'ShopSkeleton', // props: {bg: {type: String, default: '#efefef'}, width: {type: {props: {type: String, default: '#efefef'}, width: {type: String, default: '100px' }, height: { type: String, default: '100px' }, animated: { type: Boolean, default: false } } } </script> <style scoped lang="less"> .shop-skeleton { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; .block { width: 100%; height: 100%; border-radius: 2px; } animation: fade 1s linear infinite alternate; } @keyframes fade {from {opacity: 0.2; } to { opacity: 1; } .shan { &::after { content: ""; position: absolute; Animation: Shan 1.5s ease 0s infinite; top: 0; width: 50%; height: 100%; background: Linear-gradient (to left, Rgba (255, 255, 255, 0) 0, Rgba (255, 255, 255, 0.3) 50%, Rgba (255, 255, 255, 0) 100%); transform: skewX(-45deg); } } @keyframes shan { 0% { left: -100%; } 100% { left: 120%; } } </style>Copy the code
  1. Encapsulating plug-ins: insrc/componets/library/index.jsUse the plugin and go latersrc/main.jsUse the
// Extend vue's original functionality: global components, custom directives, mount prototype methods, note: no global filters. // Vue3.0 plugin: export an object, install function, pass in the default Vue constructor, Vue base extension // vue3.0 plugin: Export an object with the install function, which passes in the app instance by default, Import ShopSkeleton from './shop-skeleton.vue' export default {install (app) { App provides component / / if you want to mount the directive function prototype app. Config. GlobalProperties way app.com ponent (ShopSkeleton. The name, ShopSkeleton) } }Copy the code
  1. main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import './mock' import ShopUI from './components/library' import 'normalize.css' import '@/assets/styles/common.less' // Use (plugin) createApp(app).use(store).use(router).use(ShopUI).mount('#app')Copy the code

Prepare basic components; Extend global components by means of Vue plug-ins; The entry file imports the plug-in and configures the plug-in

3. Finally using the component complete frame on the left side of the classification effect: the SRC/views/home/components/home – cate. Vue

<ul class="menu"> <li :class="{active:categoryId===item.id}" v-for="item in list" :key="item.id" @mouseenter="categoryId=item.id"> <RouterLink to="/">{{item.name}}</RouterLink> <template v-if="item.children"> <RouterLink to="/" v-for="sub in item.children" :key="sub.id">{{sub.name}}</RouterLink> </template> <span v-else> <XtxSkeleton width="60px" height="18px" style="margin-right:5px" Bg = "rgba (255255255,0.2)" / > < XtxSkeleton width = "50 px" height = "18 px" bg = "rgba (255255255,0.2)" / > < / span > < / li > < / ul >Copy the code

Conclusion:

  1. Encapsulates skeleton screen cell components
  2. Configure the Vue plug-in and configure the global components
  3. The import file imports and configures the UI component library plug-in
  4. The category list uses the skeleton screen component for placeholders