小程序分页加载显示

在小程序中我们经常要分页加载一些图片或者商品信息，因为产品太多，如果一次加载的话会太慢，因此我们一页可能只显示20行数据，那怎么让页面拉到底部时自动加载数据呢，这里主要是要用到onReachBottom事件，这个事件会在页面拉到底部时触发。同时从远程读取新增加的数据，可能是第二页或者第三页的数，然后把他合并到原来的旧数据中，这里我们使用concat来进行合并。

  onReachBottom() {
    
    
    const that = this;
    wx.cloud.callFunction({
    
    
      name:'api',
      data:{
    
    
				type:'goodList',
      },
    }).then(res=>{
    
    
       let newList = that.data.goodsList.concat(res.result.data);//关键数据合并，把新的追到旧的列表中
       that.setData({
    
    
        goodsList:newList//把合并后的列表替换原来的列表
       })
    }).catch(console.error)
  },

这里要注意的就以下几点。

1、我们新增加的列表只会在后面追加，当前页面并不会重新滚动到最前面，只是后面会增加滚动内容，也就是说当前显示页不会变化。

2、这里使用的云函数，云函数返回值用res.result.data，这个data是返回的数据部分，result是包含数据部分的一个对象，除数据部分还有其它的一些错误信息等。

3、我们读取page中的data数据用this.data.goodsList而不能写成this.goodsList,不然会找不到属性。