封装移动端滚动组件

最近项目需要用到下拉刷新，上拉加载~开始想到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: '加载更多'
}

具体看项目怎么定义今天就这样吧~下班。。。