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);
            }
}

参考的地址：https://segmentfault.com/a/1190000011693433

二：使用

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

    data() {
        return {
            matchlist:[],
            logo: 'this.src="' + require('../assets/[email protected]') + '"',
            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);
        }
    }