Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to load data in batches with Vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to load data in batches with Vue.

Batch loading data

Recently, I was writing a vue project, because the amount of data returned in the background was too large, so I couldn't handle it when I called Amap to render the "polygon" overlay, so I just jumped off it, and then my little brother told me that I could deal with it in batches. I didn't think it was really much faster, so it's better to go through it by hand ~, record it here!

First, we need to define four global variables

Pagindex page number

How many pieces of data should be requested by pagesize per page?

The total number of pagetotal requests (total / pagesize) is always returned by the backend ~

Intertimer memory timer function, easy to clear timer

Export default {name: "map_app", inject: ['reload'], data () {return {pagindex: 1, / / page number pagesize: 300, / / page / number of messages pagetotal: 0, / / total number of requests intertimer: null, / / timer}

Then write a timer in methods to make the timer execute another method every three seconds.

/ / timer getPageInter (map) {this.loading = this.$loading ({/ / load layer lock: true, text: "loading desperately", spinner: "el-icon-loading", background: "rgba (0,0,0,0.7)"}); this.intertimer = setInterval (() = > {this.intervalData (map)) / / call the method every three seconds}, 3000);}

Then in this method we go to make a judgment, if the number of pages currently requested exceeds the total number of requests, then clear the timer!

/ / timer 2intervalData (map) {if (this.pagindex > this.pagetotal) {clearInterval (this.intertimer); / / close timer this.loading.close (); / / close pop-up window this.pagindex = 1;} else {this.renderMesh (map); / / data rendering this.pagindex + = 1;}}

The total is returned by the little brother in the background, and then every time we go to request the interface, we have to send the current page to the background, and how many pieces of data we have to request.

RenderMesh (map) {this.$axios .get (this.httpApi + "/ api/Main/GetBlockMap", {params: {BlockCode: this.pageid, page: this.pagindex, / / current page number rownum: this.pagesize / / number of requests}}) .then (res = > {console.log (res) ) .catch (err = > {console.log);});}

Because my total is to call another interface, and then write the code

This.$axios .get (this.httpApi + "/ api/Main/GetBlockMapCount", {params: {BlockCode: this.pageid}}) .then (res = > {let jsonData = eval ("(" + res.data + ")") / / Total in addition to the number of pieces of data per request, the total number of requests is this.pagetotal = Math.ceil (jsonData.totals / this.pagesize);}) .catch (err = > {console.log ("request failed");}); scrolling load data

Core method:

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);}

Monitoring:

Mounted () {window.addEventListener ("scroll", this.handleScroll);}, destroyed () {window.removeEventListener ("scroll", this.handleScroll, false);}, at this point, I believe you have a better understanding of "how to load data in batches with Vue". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.