您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue怎么實(shí)現(xiàn)分批加載數(shù)據(jù)”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue怎么實(shí)現(xiàn)分批加載數(shù)據(jù)”吧!
最近在寫(xiě)vue的項(xiàng)目,因?yàn)楹笈_(tái)返回的數(shù)據(jù)量太大,在調(diào)用了高德地圖渲染"polygon"覆蓋物的時(shí)候處理不過(guò)來(lái),直接蹦掉了,然后后臺(tái)小哥哥和我講可以分批處理~沒(méi)想到真的是快了很多很多,眼過(guò)千變不如手過(guò)一遍~,在此記錄一下?。?!
首先我們需要定義四個(gè)全局的變量
pagindex
頁(yè)碼
pagesize
一頁(yè)要請(qǐng)求多少條數(shù)據(jù)
pagetotal
一共要請(qǐng)求多少次(總數(shù) / pagesize),總是是后臺(tái)返回的~
intertimer
存的定時(shí)器的函數(shù),方便清除定時(shí)器
export default { name: "map_app", inject:['reload'], data() { return { pagindex: 1, //頁(yè)碼 pagesize: 300, //頁(yè)/條數(shù) pagetotal: 0, //一共要請(qǐng)求的次數(shù) intertimer: null, //定時(shí)器 } } }
然后再methods中寫(xiě)定時(shí)器 讓定時(shí)器每隔三秒再去執(zhí)行一個(gè)方法;
//定時(shí)器 getPageInter(map) { this.loading = this.$loading({ //加載層 lock: true, text: "拼命加載中", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)" }); this.intertimer = setInterval(() => { this.intervalData(map); //每三秒調(diào)用一次方法 }, 3000); },
然后再這個(gè)方法里面我們?nèi)プ雠袛?,如果?dāng)前請(qǐng)求的頁(yè)數(shù)超過(guò)一共要請(qǐng)求的次數(shù)就清楚定時(shí)器!
//定時(shí)器2 intervalData(map) { if (this.pagindex > this.pagetotal) { clearInterval(this.intertimer); //關(guān)閉定時(shí)器 this.loading.close(); //關(guān)閉彈窗 this.pagindex = 1; } else { this.renderMesh(map); //數(shù)據(jù)渲染 this.pagindex += 1; } },
總數(shù)是后臺(tái)小哥哥返回的,然后我們每次去請(qǐng)求接口的時(shí)候要給后臺(tái)傳當(dāng)前是第幾頁(yè),還有要請(qǐng)求多少條數(shù)據(jù)
renderMesh(map) { this.$axios .get(this.httpApi + "/api/Main/GetBlockMap", { params: { BlockCode: this.pageid, page: this.pagindex, //當(dāng)前頁(yè)碼 rownum: this.pagesize //請(qǐng)求數(shù)量 } }) .then(res => { console.log(res); }) .catch(err => { console.log("請(qǐng)求失敗233"); }); }
因?yàn)槲业目倲?shù)是調(diào)用的另外一個(gè)接口,然后也寫(xiě)一下代碼
this.$axios .get(this.httpApi + "/api/Main/GetBlockMapCount", { params: { BlockCode: this.pageid } }) .then(res => { let jsonData = eval("(" + res.data + ")"); //總數(shù)除每次請(qǐng)求多少條數(shù)據(jù)得出一共要請(qǐng)求多少次 this.pagetotal = Math.ceil(jsonData.totals / this.pagesize); }) .catch(err => { console.log("請(qǐng)求失敗"); });
核心方法:
handleScroll: function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var windowHeitht = document.documentElement.clientHeight || document.body.clientHeight; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (scrollTop + windowHeitht >= scrollHeight - 2000) { if (this.scroll) { this.GetSpecialData(); } } }, GetSpecialData() { this.scroll = false; this.page.pageIndex++; this.load(this.page, this.query); },
監(jiān)聽(tīng):
mounted() { window.addEventListener("scroll", this.handleScroll); }, destroyed() { window.removeEventListener("scroll", this.handleScroll, false); },
到此,相信大家對(duì)“Vue怎么實(shí)現(xiàn)分批加載數(shù)據(jù)”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。