11.加载条

数据发送之前isLoading：true，发送完成之后isLoading:false

1.仅一个页面使用

官网https://youzan.github.io/vant/#/zh-CN/loading#jia-zai-lei-xing

1.在main.js中引入Loading

import { Loading } from 'vant';
Vue.use(Loading);

2.使用

<van-loading type="spinner" color="#1989fa" />

<template>
  <div class="about">
    <Load v-if="isLoading"></Load>      //加载条  ，使用了全局组件Load
    <p>{{ title }}</p>
    <img :src="pic" alt="" />
  </div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      title: "",
      pic: "",
      isLoading: false
    };
  },
  mounted() {
      this.isLoading=true;     //发送请求之前
      var url = "https://douban-api.uieee.com/v2/movie/subject/30221757";
      this.axios.get(url).then(res => {
        this.title = res.data.title;
        this.pic = res.data.images.small;
        this.isLoading=false;     //发送请求之后
      });
  }
};
</script>
<style scoped>
</style>

//components/Load.vue
<div>
  <van-loading type="spinner" color="#1989fa" />
</div>

2.使用vuex，并写入全局组件中

//store/index.js
export default new Vuex.Store({
  state:{
    isLoading:true
  },
})

直接写在全局组件中,只要页面发送请求都会触发
App.vue

  <div id="app">
    <van-loading v-if="this.$store.state.isLoading" 
    size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
  </div>