1. 程式人生 > >vue 獲取滾動條上拉載入

vue 獲取滾動條上拉載入

  scrollLoding() {
      //載入事件
      let self = this;
      // 註冊scroll事件並監聽
      if (self.lists.length >= 20) {
        console.log("長度大於20");
        window.addEventListener("scroll", this.addData);
        self.tip = '暫無資料!';
      } else {
        window.removeEventListener("scroll", self.addData);
         self.tip = '已載入所有資料!';
      }
    },
    addData() {
      // 拿頁面的總數和後臺返回的總數對比,如果頁面數量小於等於後臺總數便載入
      let self = this;
      console.log($(window).scrollTop(),'-----滾動條的高----')
      console.log($(document).height(),'---------整個文件的高度----' )
      console.log($(window).height(),'-----當前可見區域的大小----')
      console.log($(window).scrollTop() >=$(document).height() - $(window).height())
      if ($(window).scrollTop() >=$(document).height() - $(window).height()) {
        self.params.currentPage = self.currentPage;
        let params = self.params;
        self.showLoding = true;
        self.$http.get(self.apis.getWsxcList, { params })
          .then(function(response) {
            let dataEl = response.data;
            // 對比當前頁和總頁數
            if (dataEl.currentPage === dataEl.pageCount) {
              window.removeEventListener("scroll", self.addData);
              self.showLoding = false;
              self.showTip = true;
              self.tip = '已載入所有資料!';
              return;
            } else {
              self.showLoding = false;
              self.currentPage++;
              let value = response.data.record;
              self.showTip = true;
              // self.lists = [];
              if (value.length > 0) {
                self.showTip = false;
                value.forEach(el => {
                  self.lists.push({
                    roomTile: el.YWKS,
                    num: el.FS,
                    date: el.WG_DATE,
                    infos: el.WG_VALUE,
                    pKey: el.P_KEY
                  });
                });
                for (let i = 0; i < self.lists.length; i++) {
                  if (self.lists[i].roomTile == "") {
                    self.lists[i].roomTile = "其它";
                  }
                }
              }else{
              }
            }
          })
          .catch(error => console.log(error));
      } else {
        self.showTip = false;
      }
    },