vue插件vue-infinite-loading 加载更多用法

首先先下载 

npm install vue-infinite-loading --save

下载完成后

在需要用的页面引入该组件

import InfiniteLoading from 'vue-infinite-loading';

然后注册组件

components: {
InfiniteLoading,
}

 

写一个方法

methods: {
            onInfinite() {//写一个方法
                var _this = this;
                var pagesize=3;
            _this.page+=1;
                axios.get('../../static/json/homelist.json').then(function(data) {
                    if(data.data.DoubanHeadlines.length>0) {
                        if(pagesize*(_this.page)>=data.data.DoubanHeadlines.length) {
                            _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');//停止加载
                        }else{
                            for(var i=pagesize*((_this.page)-1);i){
                        _this.homelist.push(data.data.DoubanHeadlines[i]) ;
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');//加载
                        }
                        }
                    } else {
                        console.log("3+:" + _this.homelist.length)
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }
                }).catch(function() {
                    console.log("ajax error")
                });
            },
        }

在dom结构中加入

    //调用方法
            //停止后显示的内容
            已经没有啦~~
          
        

完整例子

 

转载于:https://www.cnblogs.com/zhupanpan/p/9685073.html