遇到页面卡顿的时候 数据加载不出来 或者进入另一个页面 给一个动画效果

在做网页的情况下 最头疼的时候就是页面优化的问题，如从A 页面跳转到B 页面的时候 ，B页面的数据还没有加载出来，这个时候用户的体验感 是非常不好的，所以我们要进行优化我们的代码

1.首先创建一个加载动画的页面 loading.vue

<template>
    <div class="box">
      <!-- 加载图片 -->
      <van-loading type="spinner" size="56px" />
      <div class="loading_text">数据加载中</div>

    </div>
</template>
<script>
export default {
    props: {
        loadingkey: Boolean
    },
    data() {
        return {

        }
    }


}

</script>
<style scoped>
.loading_icon {
    /* border: 1px solid red; */
    width: 100px;
    height: 100px;
}

.loading_text {
    font-size: 24px;
    color: #999;
    padding-top: 30px;
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 500px;
}
</style>

2. 在创建一个引入loading 的界面

<template>
  <div>
    <loadingVue v-if="loadingkey"></loadingVue>
    <div class="wrap" v-else > 这个地方就是你渲染数据的地方</div>
 </div>
</template>
<script>
import loadingVue from "./components/loading.vue";
export default {
  components: {
    loadingVue,
  },
  data() {
    return {
      loadingkey: true
    };
  },
  mounted() {
    const startTime = new Date().getTime();
    const diff = new Date().getTime() - startTime;
    this.loadingkey = true;
    if (diff < 400) {
      setTimeout(() => {
        this.loadingkey = false;
       
      }, 400 - diff);
    } else {
      this.loadingkey = false;
     
    }
  },

这样进入页面的时候 就会有一个加载的效果 ，这样就会丝滑 ，加载完数据也就显示出来了