vue.js - vue 请求加载数据的时候如何显示加载动画

问题描述

问 题

<div class="spinner" v-show='loadFlag'></div>
<button class="btn lesson-more-btn" id='judge-more' v-on:click='judgeLoadMore'>加载更多</button>

var lhcmDetail=new Vue({
    el:'#video-detail',
    data:{
        loadFlag:false
    },
    methods:{
        loading:function(a){//是否显示加载动画
            this.loadFlag=a;
        },
        judgeLoadMore:function(){//加载更多评论
            pageNum++;
            var that=this;
            that.loading(true);
            $.ajax({
                url:url,
                type:'get',
                dataType:'json',
                success:function(data){
                    if(data.length>0){
                        //do something
                    }else{
                        //do something
                    }
                }
            });
            that.loading(false);
        }
    }

请问这样写为什么加载动画不出来呢，我把that.loading(false);注释掉动画就出来了，使用过setTimeout(func, delay)和this.$nextTick()感觉都不完美，前者数据都加载完了动画还在，后者则没有效果。

解决方案

提醒一下：建议把ajax的请求，拆分成一个独立的sdk，避免多处重复代码。

that.loading(false);应该写到ajax执行结束后。

var lhcmDetail=new Vue({
    el:'#video-detail',
    data:{
        loadFlag:false
    },
    methods:{
        loading:function(a){//是否显示加载动画
            this.loadFlag=a;
        },
        judgeLoadMore:function(){//加载更多评论
            pageNum++;
            var that=this;
            that.loading(true);
            $.ajax({
                url:url,
                type:'get',
                dataType:'json',
                success:function(data){
                    that.loading(false);             //  <---这里
                    if(data.length>0){
                        //do something
                    }else{
                        //do something
                    }
                },
                error:function(){
                    that.loading(false);             //  <---这里
                }
            });
        }
    }

这篇关于vue.js - vue 请求加载数据的时候如何显示加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！