How to handle page skeleton and loading animation in Vue

How to handle page skeleton and loading animation in Vue

In modern web applications, users have high expectations for a fast loading page experience. In order to meet this demand, developers can use some technical means to improve the loading speed of the page, and add some animation effects to enhance the user experience.

Vue, as a popular JavaScript framework, provides many options for handling page skeletons and loading animations. Some common methods will be introduced in detail below and specific code examples will be given.

1. Page skeleton

The page skeleton refers to displaying some basic layouts and styles during the page loading process, so that users can perceive that the page is loading and reserve space for upcoming content. . This prevents the page from going blank during loading and improves user experience.

In Vue, you can use Vue's render function to create the page skeleton. Here is an example:

Vue.component('skeleton', {
  render: function (createElement) {
    return createElement('div', {
      attrs: {
        class: 'skeleton'
      }
    }, [
      createElement('div', {
        attrs: {
          class: 'skeleton-header'
        }
      }),
      createElement('div', {
        attrs: {
          class: 'skeleton-content'
        }
      }),
      createElement('div', {
        attrs: {
          class: 'skeleton-footer'
        }
      })
    ])
  }
})

In the above code, we create a global Vue component named "skeleton", which uses a rendering function to generate the HTML structure of the page skeleton. In this example, we create a skeleton containing a header, content, and footer and style it using CSS class names.

Then, in the component that needs to display the page skeleton, conditional rendering can be used to determine when to display the page skeleton. Here is an example:

<template>
  <div>
    <div v-if="loading">
      <skeleton></skeleton>
    </div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

In the above example, we use Vue’s conditional rendering instruction v-if to determine when to display the page skeleton. When loading is true, the skeleton page is displayed; when loading is false, the real page content is displayed. In the mounted lifecycle hook, we simulate the process of asynchronous data loading and set the value of loading to false after 2 seconds, as shown in the example.

Through the above method, we can realize the skeleton display during the page loading process and enhance the user experience.

2. Loading animation

The loading animation is to convey the information that the page is loading to the user and provide a kind of visual feedback. In Vue, loading animation can be achieved through CSS animation, third-party libraries or Vue's transition effects.

1. CSS Animation

Using CSS animation is one of the simplest and most common ways. For example, we can define a rotation animation:

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  animation: spin 1s infinite linear;
}

Then, add the CSS class name to the element that needs to display the loading animation, as follows:

<template>
  <div>
    <div v-if="loading" class="loading"></div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

In the above example, when loading is When true, displays an element with the "loading" class name, which will trigger a CSS animation.

2. Third-party libraries

In addition to using CSS animations, we can also use some third-party libraries to achieve more complex loading animation effects. For example, use the "vue-spinner" library to display a loading animation of a rotating icon:

First, install the "vue-spinner" library:

npm install vue-spinner --save

Then, when you need to use the loading animation component Import and use this library in:

<template>
  <div>
    <div v-if="loading">
      <spinner></spinner>
    </div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import Spinner from 'vue-spinner'

export default {
  components: {
    Spinner
  },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

In the above example, we use conditional rendering to determine when to display the loading animation in the component that needs to display the loading animation. When loading is true, display a "spinner" component, which will display a rotating loading icon. When loading is false, the real page content is displayed.

To sum up, Vue provides a variety of methods for processing page skeletons and loading animations. By using rendering functions and conditional rendering, we can display the page skeleton; and using CSS animation and third-party libraries, we can achieve various cool loading animation effects. By using these technical means, we can improve the page loading speed of web applications and provide users with a better experience.

The above is the detailed content of How to handle page skeleton and loading animation in Vue. For more information, please follow other related articles on the PHP Chinese website!