h5在线编辑_秀堂h5_手机ui设计_答题类h5_h5测试小游戏
当前位置:建站首页 > 新闻资讯 > 最新签约 >

企业制作小程序_vue2完成数据请求显示loading图

发表日期:2021-01-11 11:33文章编辑:jianzhan浏览次数: 标签:    

vue2实现数据请求显示loading图       这篇文章主要为大家详细介绍了vue2实现数据请求显示loading图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失。这个,一般只需要在封装的axios中写入js事件即可。当然,我们首先需要在app.vue中,加入此图片。如下:

 template 
 div id="app" 
 loading v-show="fetchLoading" /loading 
 router-view /router-view 
 /div 
 /template 
 script 
 import { mapGetters } from 'vuex';
 import Loading from './mon/loading';
 export default {
 name: 'app',
 data() {
 return {
 computed: {
 ...mapGetters([
 'fetchLoading',
 components: {
 Loading,
 /script 
 style 
 #app{
 width: 100%;
 height: 100%;
 /style 

这里的fetchLoading是存在vuex里面的一个变量。mon.js里需要如下定义:

/* 此js文件用于存储公用的vuex状态 */
import api from './../../fetch/api'
import * as types from './../types.js'
const state = {
 // 请求数据时加载状态loading
 fetchLoading: false
const getters = {
 // 请求数据时加载状态
 fetchLoading: state = state.fetchLoading
const actions = {
 // 请求数据时状态loading
 FETCH_LOADING({
 commit
 }, res) {
 commit(types.FETCH_LOADING, res)
const mutations = {
 // 请求数据时loading
 [types.FETCH_LOADING] (state, res) {
 state.fetchLoading = res
}

loading组件如下:

 template 
 div 
 img src="./../../assets/main/running.gif" alt="" 
 /div 
 /template 
 script 
 export default {
 name: 'loading',
 data () {
 return {}
 /script 
 !-- Add "scoped" attribute to limit CSS ponent only -- 
 style scoped 
 .loading{
 position: fixed;
 top:0;
 left:0;
 z-index:121;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.3);
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 .loading img{
 margin:5rem auto;
 /style 

最后在fetch/api.js里封装的axios里写入判断loading事件即可:如下

// axios的请求时间
let axiosDate = new Date()
export function fetch (url, params) {
 return new Promise((resolve, reject) = {
 axios.post(url, params)
 .then(response = {
 // 关闭 loading图片消失
 let oDate = new Date()
 let time = oDate.getTime() - axiosDate.getTime()
 if (time 500) time = 500
 setTimeout(() = {
 store.dispatch('FETCH_LOADING', false)
 }, time)
 resolve(response.data)
 .catch((error) = {
 // 关闭 loading图片消失
 store.dispatch('FETCH_LOADING', false)
 axiosDate = new Date()
 reject(error)
export default {
 // 组件中公共页面请求函数
 commonApi (url, params) {
 if(stringQuery(window.location.href)) {
 store.dispatch('FETCH_LOADING', true);
 axiosDate = new Date();
 return fetch(url, params);
}

这样就实现了,项目中当加载数据的时候,显示gif图片,当数据加载出来时消失。

关于vue.js的学习教程,请大家点击专题、进行学习。

更多vue学习教程请阅读专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关新闻