快捷導(dǎo)航

vant的Loading加載動(dòng)畫(huà)組件的使用(通過(guò)接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài))

更新時(shí)間：2024年01月19日 14:54:09 作者：秋綏冬禧.

這篇文章主要介紹了vant的Loading加載動(dòng)畫(huà)組件的使用,通過(guò)接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

在store.js中使用vuex全局控制loading顯示與隱藏

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    LOADING: false
  },
  mutations: {
    showLoading(state) {
      state.LOADING = true
    },
    hideLoading(state) {
      state.LOADING = false
    }
  }

新建loading公共組件頁(yè)面

 
<template>
  <div class="loading">
    <van-loading type="spinner" color="#1989fa" />
  </div>
</template>
<script>
  import Vue from 'vue';
  import {Loading} from 'vant';
  Vue.use(Loading);
  export default {
    name: 'LOADING',
    data() {
      return {}
    },
  }
</script>
<style lang="scss" scoped>
  .loading {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

在App.vue中，將loading組件掛載到工程根節(jié)點(diǎn)

掛載到App.vue中之后所有的接口請(qǐng)求都會(huì)加載loading組件

可以在需要的頁(yè)面單獨(dú)引用

 
<template>
  <div id="app">
    <Loading v-show="LOADING"></Loading>
    ......//其他代碼
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import Loading from '@c/Loading.vue'
  export default {
  // ...解構(gòu)，將store中的state進(jìn)行映射。
  // 在template中可以直接使用，不需要通過(guò)this.$store.state一個(gè)個(gè)獲取store中的state數(shù)據(jù)。
    computed: {
      ...mapState(['LOADING'])
    },
    name: 'App',
    components: {Loading}
  }
</script>

在請(qǐng)求攔截器和響應(yīng)攔截器中配置

在封裝好的axios中，利用axios的攔截器實(shí)現(xiàn)請(qǐng)求時(shí)提交store顯示loading；

請(qǐng)求失敗或者完成提交store隱藏loading。

 
import Vue from "vue";
import axios from 'axios';
import store from '../../store';
// 請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
  store.commit('showLoading')
  return config;
}, function (error) {
  store.commit('hideLoading')
  return Promise.reject(error);
});
//響應(yīng)攔截器
axios.interceptors.response.use((response) => {
  store.commit('hideLoading')
  return response.data;
}, (error) => {
  store.commit('hideLoading')
  return Promise.reject(error);
});
//綁定到vue原型中
Vue.prototype.$http = axios;

如果在單個(gè)請(qǐng)求中使用

 
// 在請(qǐng)求時(shí)
this.$store.commit('showLoading')
//請(qǐng)求完成后  
this.$store.commit('hideLoading')

到此這篇關(guān)于vant的Loading加載動(dòng)畫(huà)組件的使用，通過(guò)接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài)的文章就介紹到這了,更多相關(guān)vant Loading加載動(dòng)畫(huà)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: