mint ui-Infinite scroll无限加载阻止阻止多次加载问题

html:
              

                        infinite-scroll-disabled="loading"      //是否加载
                        infinite-scroll-distance="10"             //显示条数
                    >

    script: 

    data()
        {
            loading: false
        },

    methods:
    {

         loadData(  )
                {        

                    // 防止多次加载,loading = true,阻止加载
                    this.loading = true;

                    myExprience(this.params).then(res => {
                        if( res.data.length > 0 )
                        {                     
                                this.order_list        = res.data;
                                this.loading           = false;
                        }

                        //当获取到的数据长度 < 设置长度,阻止加载,反之加载,并增加页数
                        if( res.data.length < this.params.item)
                        {
                            this.loading = true;
                            //用户再滑动,已经阻止加载了。相当于,后台这会再加100条数据进来,都没法加载。
                              除非退出页面,再重新进入,滑动加载。
                        }else
                        {
                            this.params.page++;
                            this.loading = false;
                        }
                    });    
                }

    }

     

    发现官网也更新了阻止多次加载的方法,使用setTimeout:

    http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll

     

     

你可能感兴趣的:(vue,mint,ui,Infinite,scroll,无限加载)