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,

          });

        });

    },