VueScroller 学习

学习了https://blog.csdn.net/youyudexiaowangzi/article/details/81144497 这篇文章后

文档：https://www.npmjs.com/package/vue-scroller

自己记录一下VueScroller的学习

安装并引入

npm install vue-scroller -D //网上看是这个参数

main.js：

import VueScroller  from 'vue-scroller'

Vue.use(VueScroller)

代码如下

 <!--on-refresh：下拉刷新-->
 <!--on-infinite：上拉加载-->    
<scroller class="scroller" ref="my_scroller" :on-infinite="infinite" :on-refresh ="refresh" :noDataText="noDataText" ></scroller>

data(){
        return{
            p:0,
            list:[],
            loading:true,
            noDataText:"没有更多了"
        }
    },
methods: {
        getList(done){
            let url = "http://www.baidu.com";
            let p = this.p;
            let that = this;

            if(this.loading == true){
                this.loading = false;

                //你的ajax
                this.$ajax({url: url, params: {p: p}
                    }).then(response =>{
                        let list = response.data;

                        if (list.length) {
                            if(that.p == 0) that.list = [];     //下拉刷新时重置数组

                            list.forEach((v, k) => {
                                that.list.push(v);
                            })

                            that.p++;

                            that.loading = true;

    //                        that.$refs.my_scroller.finishInfinite(true);   //有数据停止无限加载,可用done代替
                            done(true);
                        }else{
    //                        that.$refs.my_scroller.finishInfinite(2);     //无数据停止无限加载,可用done代替
                            done(2);
                        }
                    });
            }else{
                done(2);
            }
        },
        //上拉加载
        infinite: function (done) {
            console.log('infinite')
            this.getList(done);
        },
        //下拉刷新
        refresh: function (done) {
            console.log('refresh');
            this.p = 0;
            this.loading = true;
            this.getList(done);
        },
    }

上拉加载后需要手动调用来 finishInfinite 停止重复刷新,用done 的话上拉和下拉就可以少做一个判断

遇到的问题还有header 头被它遮挡了，加一个跟你header 头高度的padding 就行

.scroller{ padding-top:50px;}