小程序上拉加载功能

小程序上拉加载功能

随着手指向上拉动不断加载更多的数据这种做法在现在的移动端很常见，这种就是接下来要做的上拉加载。这样做可以加快加载速度，按需加载，不用一上来就把所有的数据都请求过来。
做上拉加载之前先来理清一下思路：

1. 移动端的上拉加载其实相当于pc端的分页功能，初始加载第一页的数据（page=1），把数据渲染到页面，并把总页数的值保存起来；
2. 当页面滚动触底时就触发事件向服务器发起请求加载第二页的数据（page+1），将返回的数据做数组的拼接重新渲染到页面；
3. page每次累加都要判断是否小于总页数，若小于总页数，则重复上述的步骤，否则不发请求；
   实现的代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    page:1,  //页数
    page_count:null,	//总页数
    carsOrder:[],			//数据渲染的数组
  },
  onLoad(){
  	this.getLists()		//初始数据
  },
  //上拉加载触底的函数
   onReachBottom: function () {
    // 上拉加载更多
    if(this.data.page<this.data.page_count){		//判断page是否大于总页数page_cout
        this.setData({
          page:++this.data.page
        })
        this.getLists()
    }
  },
  
  //封装获取数据的函数
  getLists(){
  //请求后台的接口地址
	 return getInfo({page:this.data.page}).then(res => {
	        if(res.code==1){
	          let carsOrder=this.data.carsOrder
	          carsOrder.push(...res.data.order)
	          this.setData({
	         	page_count：res.data.page_count,		//总页数
	            carsOrder		//数据渲染的数组
	          })
	        }else{
	        //请求失败时弹出错误信息
	          wx.showToast({
	         	title: res.msg,
	          	icon: 'none'
		        })
	        }
	      }).catch(err => {
	         console.log(err)
	      })
  }

第一篇文章，还有待提高。。。