easyscroll - 滾動加載更多數據(list)

需求:一個使用了easyscroll組件的vue項目,想要滾動觸底,加載新的數據。
1.找到組件源文件main.vue;重構handleScroll();vue

handleScroll() {  
  const wrap = this.wrap;  
  if(this.preScrollHeigt !== wrap.scrollHeight){  
    this.preScrollHeigt = wrap.scrollHeight;  
    this.update();  
  }  
  this.moveY = ((wrap.scrollTop \* 100) / wrap.clientHeight);  
  // 判斷滾動得高度觸底,給父組件傳遞一個數據。
  if(wrap.scrollTop == ( wrap.scrollHeight - wrap.clientHeight)){  
      this.$emit('scrollBottom', true);  
      this.update();  
  }else{  
      this.$emit('scrollBottom', false);  
  }  
  this.moveX = ((wrap.scrollLeft \* 100) / wrap.clientWidth);  
},

<EasyScrollbar @scrollBottom="getScrollBottom">this

getScrollBottom(data){  
    if (data && !this.loading){  
        this.loading = true  

        if (this.page < Math.ceil(this.waringListTotal/this.pageSize)){  
            this.page ++  
            this.warningGetData()  //接口方法,具體細節根據本身的項目須要寫這個方法。
        }else{  
            // 給個沒有更多的提示,OK了  
        }  
    }  
},  
  
 

最後,雖然我很想吐槽一下easyscroll 組件,用起來須要本身看源碼,可是本人又沒能力本身寫出好的滾動組件,目前也沒有找到更好的合適的滾動組件,因此只能重構後記錄在冊,防止下次遇到一樣的問題。code

相關文章
相關標籤/搜索