mpvue小程序——列表自定义懒加载功能

**需求：**后台接口没有做分页处理，直接传来了很多条数据（几千上万条），会造成小程序渲染卡顿，页面空白；

**解决：**接口传来的数据接收后存到数组里，自定义懒加载分页请求功能，每次滚到底部，再去请求下页数据；

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

注：尽量还是让后端接口实现分页功能，这才是王道！