vue 獲取滾動條上拉載入
阿新 • • 發佈:2018-12-20
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; } },