移動端下拉刷新、上拉加載之vueScroll

移動端開發，處理列表翻頁和數據的時候，下拉刷新和上拉加載應用的比較普遍，今天給你們推薦一個vue的插件，vueScroll，首先上圖：

話很少說，上代碼了：

1、引入並使用VueScroll

import VueScroller from 'vue-scroller';
Vue.use(VueScroller)

2、在html或者.vue組件裏面使用

3、在js文件裏面操做插件

首先在在methods裏面寫上方法

在data裏面實現申明好 isLoading = true;

而後繼續在methods裏面寫上刷新和加載的方法：

refresh(done) {
    let timer = null;
    this.page = 1;
    clearTimeout(timer);
    timer = setTimeout(() => {
         this.myInstalHomeFun(done);
    }, 500);
},
infinite(done) {
    let timer = null;
    clearTimeout(timer);
    timer = setTimeout(() => {
         this.myInstalHomeFun(done);
    }, 500);
}

到這裏就能夠實現效果了，可是可是 有幾個細節我必須提一下：

（1）高度的問題，這個插件須要給外層的scroller 設置高度，因此要注意，我這裏是這樣操做的：

methods: {
        // 獲取高度
        getHeight(){
            let bodyHeight = document.documentElement.clientHeight;
            let scroller = this.$refs.scroller;
            let scrollerTop = scroller.getBoundingClientRect().top;
            scroller.style.height = (bodyHeight-scrollerTop)+"px";
        },
}

而且在mounted裏面調用這個方法，這樣就能夠把高度設置好，而且在任何位置均可以放置了

（2）vueScoller 內部的結構是絕對定位，因此必定要給外層設置好相對定位；

這樣就能夠解覺定位引發的位置跑偏的問題了。

參考文檔：https://vuescrolljs.yvescodin...