vue滚动分页加载

　　做了一个项目，要求将后台数据滚动加载。

　　滚动加载必须要求后台传的接口中由pageSize和pageIndex两个参数，来判断每次传数据的条数和数据的页码。

　　首先要判断滑轮是向上滚动还是向下滚动，可以在data里设一个变量scrollJudge存储旧的scrollTop，每次滚动事件时都要先判断是否小于新的scrollTop并记录下新scrollTop。若小于，则滑轮向下滚动。

　　判断滚动分页加载的时机：什么时候加载下一页？在滚动上去的高度scrollTop加上显示的数据的高度offsetHeight加上我们设置的预留的底部高度（假设为200）之和大于或等于已经加载出来的数据的总高度的时候，就申请加载下一页。已经加载出来的数据的总高度可以用 e.target.childNodes[0].clientHeight 求得。e.target 是滚动事件源，滚动加载函数就绑定在这层容器上，这层容器要设置高度，超出高度时显示滚动条，在它内部另设一个容器，不设高度，高度会由数据自行撑开。e.target.childNodes[0] 就代表这层不设高度的容器，可以由求得其高度。

新修改: 　　获取子容器高度 clientHeight 可以不再用 e.target.childNodes[0] 推了，可以给子容器设置ref，使用this.$refs获取。

　　要提前设置一个page全局变量为1，每次滚动加载后就给page加上1，当作参数传给申请后台数据的接口函数，来说明该传第几页数据出来。注意要提前设置全局变量空数组scrollList，每次接收数据后都要把接收的数据传进这个空数组。在html里用v-for遍历这个数组就可以将数据显示出来了。

　　每次接收数据结束后，都要判断接收过来的数据的长度，若小于pageSize,就说明数据传输结束，停止page自加，停止调用申请数据的函数。可以用一个全局变量pageBack来存储每次返回的数据长度，当它等于零时，停止滚动加载。

　　注：每次切换新的滚动页面都要把page，scrollList，pageBack，scrollJudge等数据回复初始值。

额外问题：一开始把el-dialog也放进v-for里了，导致每次一点出来他都加载20遍的倍数，其实el-dialog不用放进for循环里，只要控制它的el-button放进去就好了。

　　

scrollLoading(e) {

      // 滚动长度

      // 判断滚动加载时机

      if ( e.target.scrollTop + e.target.offsetHeight + 200 >= e.target.childNodes[0].clientHeight    &&    e.target.scrollTop > this.scrollJudge) {

        // 滚动加载

        this.page++;

        this.scrollJudge = e.target.scrollTop;

        // 判断是不是返回最后一段数据

        if (this.pageBack != 0) {

            this.getNodeList(this.textTitle, this.page);

        }

      }

    },

//调用接口传数据

getNodeList(id, page) {

      let item = {};

      item.parentId = id;

      item.pageSize = 20;

      item.pageIndex = page;

      var url = this.Api + "接口地址";

      http

        .myGet(url, item)

        .then((data) => {

          if (data.status === 1) {

            this.parentNodes = JSON.parse(JSON.stringify(data));

            // 根据页数滚动加载

            if (page == 1) {

              this.scrollList = data.messageJson;

            } else {

              this.scrollList = this.scrollList.concat(data.messageJson);

            }

            // 判断是不是滚动到底部

            this.pageBack = data.messageJson.length;

          } else {

            this.$message({

              type: "error",

              message: data.message,

              offset: 100,

            });

          }

        })

        .catch((err) => {

          this.$message({

            type: "error",

            message: err,

            offset: 100,

          });

        });

    },