vue下拉刷新 vue-infinite-scroll

一：基础使用

• 1.安装 npm i vue-infinite-scroll --save
• 2.引入 var infiniteScroll = require('vue-infinite-scroll') Vue.use(infiniteScroll)
• 3.小例

选项 描述

infinite-scroll-disabled	如果该属性的值为true，则将禁用无限滚动
infinite-scroll-distance	数字(默认值=0)——在执行v-infinite-scroll方法之前，元素底部和viewport底部之间的最小距离。
infinite-scroll-immediate-check	 布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-listen-for-event	当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay	下次检查和这次检查之间的间隔(默认值= 200)

vue 组件里面：

    data(){
        return{
                busy: true,
            page:1,
            pageSize:8,
        }
    },methods:{
    
    
     getGoodsList(flag){
                let sort = this.sortFlag ? 1 : -1;
                let param = {
                    sort:sort,
                    priceLevel:this.priceChecked,
                    page:this.page,
                    pageSize:this.pageSize
                }
                axios.get('/goods/list',{params:param}).then(res=>{
                    if(flag){
                        // 多次加载数据
                        this.goods = this.goods.concat(res.data.result);
                        if(res.data.result.length == 0){
                            this.busy = true;
                        }else{
                            this.busy = false;
                        }
                    }else{
                        // 第一次加载数据
                        this.goods = res.data.result;
                        // 当第一次加载数据完之后，把这个滚动到底部的函数触发打开
                        this.busy = false;
                    }
                })
            },
            loadMore: function() {
                this.busy = true;
                // 多次加载数据
                setTimeout(() => {
                    this.page ++;
                    this.getGoodsList(true);
                }, 1000);
            }
}

参考的地址：segmentfault.com/a/119000001…

二：使用

在最大的标签上写三个条件：注意标签的高度，最好设置一个最小高度min-height

    data() {
		return {
			matchlist:[],
			logo: 'this.src="' + require('../assets/state1@2x.png') + '"',
        	busy2:true,
        	start:1
		}
	},
	created(){
		this.getList2()
	},
	methods:{
		getList2:function (flag2){
			

	    	this.axios.get('urlxxxx',{params:{start:this.start}}).then(res=>{
	    			console.log(res.data);
					// 按时间倒序排列
					res.data.sort(function(a,b){
						return b.time-a.time;
					});
	    		if(flag2){
	    			console.log(this.start);
					this.matchlist = this.matchlist.concat(res.data);
					// this.matchlist = res.data;
					console.log(this.matchlist);
					if(this.matchlist.length == 0){
						this.busy2=true;
						console.log('lenght');
					}else{
						this.busy2 = false;
					}

	    		}else{
					this.matchlist = this.matchlist.concat(res.data);
					// this.matchlist = res.data;
					this.busy2 = false;
	    		}
			},err=>{
				console.log(err);
			});
		},
        
        loadMore2: function() {
        	console.log('load');
            this.busy2 = true;
            // 多次加载数据
            this.start ++;
            this.getList2(true);
        }
	}