需求:一個使用了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