封裝移動端滾動組件

最近項目需要用到下拉刷新，上拉加載~開始想到better-scroll 畢竟用的人也挺多的，但是，我使用了之後，bug奇奇怪怪，讓我無從下手，去解決，bug就不舉例了~

所以就用了這樣的方法，

-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.

auto ：使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。

touch ：使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 */ 
-webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開，滾動會立即停止 */ 

但是效果還是不是很好，因爲我們的數據是很強大的，需要分頁處理，顯然，我這樣不行，

然後，請教一下大佬，大佬，說用自己封裝的插件，然後，我就效仿了一下，效果可以呢~下面貼出代碼

在methods:{
loadMore() {
        let winScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight,
          winHeight = document.documentElement.clientHeight || document.body.clientHeight,
          canScrollHeight = winScrollHeight - winHeight,
          scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop == canScrollHeight && this.pNum < this.totalCnt) {
          this.pNum++;
          this.pullUpTxt = '加載中...';
          this.showPullTxt = true;
          setTimeout(() => {
            this.handleCurrentAppList();
          }, 2000);
        }
      },
}
  
在mounted(){
 document.onscroll = () => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 10) {
          this.loadMore(); // 翻頁
        }
      };
}
data{
limit: 10,
        pNum: 1,
        totalCnt: 0,
        showPullTxt: false,
        pullUpTxt: '加載更多'
}

具體看項目怎麼定義今天就這樣吧~下班。。。