**需求:**后台接口没有做分页处理,直接传来了很多条数据(几千上万条),会造成小程序渲染卡顿,页面空白;
**解决:**接口传来的数据接收后存到数组里,自定义懒加载分页请求功能,每次滚到底部,再去请求下页数据;
data(){
return{
dataList: [], //页面渲染时存放的数据
_dataList: null,//接口传来的数据存放数组
currentPageNum: 1,//当前页
}
}
setData (data = []) {
this.dataList = []
this._dataList = null
if (data && data.length > 99) { // 数量超过100条,懒加载分页
let arr = []
let len = Math.ceil(data.length / 20)
for (let i = 0; i < len; i++) {
arr[i] = data.slice(i * 20, (i + 1) * 20)
}
this._dataList = arr
this.dataList = this._dataList[0]
} else if (data) {
this.dataList = data
}
setTimeout(() => {
mpvue.hideLoading()
}, 1000)
},
小程序自带方法onReachBottom ,到达底部时触发
onReachBottom () {
if (this._dataList && (this.currentPageNum < this._dataList.length)) {
mpvue.showLoading({
mask: true,
title: '加载中!'
})
let nextPageNum = this.currentPageNum++
let arr = this._dataList[nextPageNum]
for (let i = 0; i < 20; i++) {
this.dataList.push(arr[i])
}
setTimeout(() => {
mpvue.hideLoading()
}, 500)
}
}
注:尽量还是让后端接口实现分页功能,这才是王道!