Vue封装上拉加载更多组件

演示效果：孙权的博客

刚开始写分页功能，也没多想就用了传统分页。传统分页器用了一段时间，后来内容多一些，觉得还是上拉加载更多比较时尚方便，于是又将分页器替换为上拉加载更多。

我的上拉加载更多效果在本博客首页就能看到(www.sunq.xyz)，形式极简。大致思路是先写一个上拉加载更多子组件，需要用上拉加载更多的父页面再调用这个子组件。

子组件中用onScroll监听鼠标事件，纵向滚动轴滑到底部后，子组件会调用父组件方法来请求列表接口请求对应数据。

父组件请求接口方法中，发现数据已加载完毕，则操作子组件属性，停下子组件对滚动的监听。即可实现最简版的懒加载功能。

子组件所有代码如下：

<template>
    <div></div>
</template>

<script>
  export default {
    name: "Pagination",
    data:function () {
      return{
        OnScroll:true
      }
    },
    methods: {
        SetUpdate:function (Value) {
          this.OnScroll = Value;
        }
    },
    created:function(){
      var RefreshCount = 0, That = this;

      window.addEventListener('scroll',()=>{
        var ScrollTop,ClientHeight,ScrollHeight;
        // safari要求 document.body.scrollTop
        ScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        ClientHeight = document.documentElement.clientHeight;
        ScrollHeight = document.documentElement.scrollHeight;

        if(ScrollHeight - ScrollTop - ClientHeight < 130 && That.OnScroll){
          That.OnScroll = false;
          RefreshCount += 1;
          That.$emit('PaginationToParent',RefreshCount);
        }
      })
    },
  }
</script>

父组件调用代码如下：

<template>
  <Pagination v-on:PaginationToParent="ValueByPagition" ref="Pagi"></Pagination>
</template>

export default {
    methods: {	
      ValueByPagition:function (SelectPage) {
        var That = this;
        this.SQFrontAjax({
            Url: '/api/MessageRead/foreend',
            UploadData: {
              PagnationData: {
                  Skip:SelectPage * 8,
                  Limit:8
                }
            },
            Success: function (data) {
              data.forEach(function (Item) {
                Item.MessageLeaveDate = That.DateFormat(Item.MessageLeaveDate);
              });
              That.MessageList = That.MessageList.concat(data);
              if(data.length != 8){
                That.AticleBottom = true;
                // 停止分页器的滚动监听
                That.$refs.Pagi.SetUpdate(false);
              }else {
                That.$refs.Pagi.SetUpdate(true);
              }
            }
      });
    }
}