Paging is usually implemented in the background and the front-end request is done. But occasionally… That is also very helpless! Data less case, front-end can do! More data, or have to suggest the background to do!!

Slice (start, end) Directly on the code, no wordy! 【 results 】Code: HTML:

<template>
  <view>
    <button @click="PageLoad">Click on the load</button>
  </view>
</template>
Copy the code

js:

<script>
export default {
	data() {
		return {
			mokeData: [1.2.3.4.5.6.7.8.9.10].curPage: 0./ / the current page
			perPage: 3.start: 0.end: 0.data: []}},methods: {
		PageLoad() {
			this.curPage++
			this.pageRequire(this.mokeData, this.curPage, this.perPage, 'asc')
			console.error(this.data);
		},
		// sort Sort type desc reverse order/ASC positive order
		pageRequire(arr, curPage, perPage, sort) {
			let totalLen = arr.length // Data length
			// let start = 0;
			// let end = 0;
			let resArr = []
  		let totalPage = Math.ceil(totalLen / perPage) // Total pages
  		totalPage = totalPage - curPage
  		let curTotalNum = totalLen - this.end
  		if (sort === 'asc') {
				/ / stop
    		if (curTotalNum <= 0) {
    		  alert('No more.')
    		  return 
    		}
  		  totalPage = totalPage - curPage
  		  this.end = curPage * perPage
  		  resArr = arr.slice(this.start, this.end)
				this.data = [...this.data, ...resArr]
  		  // console.log(resArr);
  		  this.start = this.start + perPage
  		} else {
				/ / stop
   			if (totalPage < 0) {
   			  alert('No more.')
   			  return 
   			}
  		  this.start = totalLen - (perPage * curPage) / / start-stop
  		  this.end = totalLen - ((curPage - 1) * perPage) / / termination
  		  if (this.start <= 0) this.start = 0;
  		  resArr= arr.slice(this.start, this.end)
				this.data = [...resArr, ...this.data]
  		  // console.log(resArr);
  		}
		}
	}
}
</script>
Copy the code

Here’s another trick:

/** * array: processing array * groupNum: grouping several groups */
	dealArray(array: Array<any>, groupNum: number) {
		let temp:any = []
		for(let i = 0, len = array.length; i < len; i += groupNum) {
			temp.push(array.slice(i, i + groupNum))
		}
		return temp
	}
Copy the code

We can divide all the data arrays into several small arrays, which you can understand as the number of items per page 😆! The structure is as follows:Here the length, can be understood as pagable number 😆 that we each either pull down, or slide up loading, just according to the subscript accumulation every time, take out each element, and then merged into a new array inside, but also can achieve according to your requirements each load several data 😆