关于前端:elementUI-实现列表树滚动到底部后加载更多

需要：我的项目理论开发中可能，列表树可能不能显式的给到分页按钮，大多时候会应用指标滚动到底部后触发下一页数据的加载

版本：vue2

组件：el-tree

template:

<!--
非残缺代码
树须要指定高度，或继承无效的父级高度
icon-class="xxx" 定义一个没有定义的类型会去掉菜单的 icon
-->
    <el-tree
      class="user-list filter-tree tree-scrollbar"
      :data="treedata"
      node-key="id"
      highlight-current
      @node-click="nodeClick"
      :indent="10"
      icon-class="xxx"
      ref="menutree">
      <div class="ds-custom-tree-node" slot-scope="{data}">
        <div class="tree-title-wrap">
          <div class="tree-title" :title="data.name" >{{data.name?data.name:data.account}}</div>
          <div class="tree-sub" v-show="data.name" >{{data.account}}</div>
        </div>
      </div>
    </el-tree>

script

methods:{
  /**
  * 须要先初始化该监听器，且应留神不要反复监听
  * 留神 vue 的 this 和监听器外部的 this 辨别
  * 滚动到最底部的时候 currentpage 加 1
  * **/
  loadMoreUser(){
    const that = this;
    document.querySelector('.user-list').addEventListener('scroll', function () {
      // scrollHeight: 内容区域的总高度
      // clientHeight: 内容可视区域的高度
      // scrollTop: 滚动间隔顶部的地位
      // 总高度减间隔顶部的间隔再减 5 判断是否小于可视区域的高度，依据须要按需调整
      if (parseInt(this.scrollHeight - this.scrollTop - 5)<this.clientHeight){if((that.currentpage/1*that.pagesize)<that.total){// 以后已加载的数据须要小于总条数
          that.currentpage = that.currentpage/1 + 1;//
          that.loading=true;// 加载下一页的时候给一个缓冲罩子
          that.getUser(that.searchkey)// 带搜寻参数
        }
      }
    })
  },
/**
* 按需决定是否应用异步加载
* 本我的项目应用的是 GQL 语句申请，按需换成 axios 或其余
**/
async getUser(keywords){
      this.currentpage=this.currentpage?this.currentpage/1:1;
      var variables={offset:((this.currentpage-1)*this.pagesize)?((this.currentpage-1)*this.pagesize):0,// 查问起始地位
        first:this.pagesize,// 每页数量
        keywords:this.searchkey
      }
      if(this.activefilter){variables.filter={};
        if(this.activefilter){
          variables.filter.active={eq:this.activefilter}
        }
      }
      await this.$apolloclient.query({
        query: gqlreq.rcsimpleusers,
        variables: variables
      }).then((res)=>{
        // 申请失败
        if(res.errors&&res.errors[0]){
          this.$message({
            type:"warning",
            message:res.errors[0].message
          })
        }else if(res.data&&res.data.users){// 接口申请胜利
          this.total = res.data.users.totalCount;
          let newlist= commonjs.takeoffEdges(res.data,'users');
          this.treedata= this.treedata.concat(newlist);// 申请的新数据跟在旧数据后
        }
      })
      // 等接口完结后敞开 loading
      this.loading=false;
    },
}

留神：
1：列表树需给定高度
2：滚动前需减少滚动事件的监听器，且留神不要反复监听
3：滚动到底部需计算已加载数据是否小于总数据，小于总数据能力持续加载，否则应告知用户已加载结束
4：接口申请到数据，解决后接在之前的数据之后

如有更好的解决形式请甩给我链接哦~

以上