vue滾動載入事件
阿新 • • 發佈:2019-02-17
created(){//頁面建立的時候呼叫 this.scrollLoding(); }, scrollLoding() { // 快取指標 let self = this; // 上一頁面帶過來的引數內容 // console.log(self.dataParams.ID) // 滾動條的高 // 註冊scroll事件並監聽 if(self.coffeeType.record.length >= 20){ console.log('長度大於20') window.addEventListener('scroll',this.addData); }else{ window.removeEventListener('scroll',self.addData); self.showTip = true; } }, addData(){ var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) // 拿頁面的總數和後臺返回的總數對比,如果頁面數量小於等於後臺總數便載入 let self = this; // let windowHeight = $(window).height()//螢幕解析度的高 // let scrollHeight = $(document).height()//整個文件的高度,可視具體情況使用 // console.log("當前可視的高度加滾動條的高度-->變化前1::"+Math.ceil(window.screen.height + scrollTop ));//當前可視的高度加滾動條的高度 if(self.m1===1){ self.num2=document.body.clientHeight;//當前整個文件的高度 self.num=self.num2; self.m1+=1; } // console.log("當前整個文件的高度-->變化前2::"+self.num); if (window.screen.height + scrollTop >= self.num) { self.num=self.num2*(self.currentPage);//當前載入頁數乘以文件高度得出20條資料的長度 // console.log("當前可視的高度加滾動條的高度-->變化後1:::"+Math.ceil(window.screen.height + scrollTop)); // console.log("當前整個文件的高度-->變化後2::"+self.num); console.log('進來了'); let params = { pageSize: 20, sysUnit:44, currentPage: self.currentPage, // 滾動載入頁面數量 type:self.dataParams.type, // 以下為上一頁面傳過來的引數 NAME: self.dataParams.NAME, //名稱-name T_STATUS: self.dataParams.T_STATUS,//歷史人員 ISEQUERY: self.dataParams.ISEQUERY, ID: self.dataParams.ID,//349378497623763818 SEX: self.dataParams.SEX, BIRTHDAY1: self.dataParams.BIRTHDAY1, BIRTHDAY2: self.dataParams.BIRTHDAY2, NATION: self.dataParams.NATION, NATIVE_PLACE: self.dataParams.NATIVE_PLACE }; self.showLoding = true; self.$http.get(self.apis.baseURL,{params}) .then(function(response) { self.totalRecord = response.data.totalRecord console.log( response.data.currentPage, response.data.pageCount) // 對比當前頁和總頁數 if(response.data.currentPage === response.data.pageCount){ window.removeEventListener('scroll',self.addData); self.showLoding = false; self.showTip = true; return; }else{ self.showLoding = false; self.currentPage++; console.log('成功後的頁面數量', self.currentPage) // self.numLen = response.data.record.length; self.listTitle =eval("("+response.data.columnname+")"); let Attribute =eval("("+response.data.column+")"); response.data.record.forEach(item => { // ID = item.P_KEY; self .ID.push(item.P_KEY); // 獲取左邊的name self .leftName.push( item.NAME //姓名 ); let list = []; Attribute.forEach(data => { //對陣列中的每一個引數迴圈 list.push(item[data]); }); // console.log(list)//每一個引數對應的屬性名 self.listContent.push(list); }); } // 資料更新完畢,將開關開啟 // sw = true; }) .catch(error => console.log(error)); }else{ } }, }, destroyed () {//銷燬頁面時移除滾動事件 window.removeEventListener('scroll',this.addData); },