小程序上拉加载数据demo

1.需求分析，页面进来的时候显示10条数据，用户下拉加载新的数据

1.1onReachBottom()监听用户上拉触底事件。

//data
  data: {
    currentTypeId: '1',
    dataMenuArr: [
      { "label_name": "分润奖", "label_id": 1 },
      { "label_name": "区域奖", "label_id": 2 },
      { "label_name": "推荐奖", "label_id": 3 }
    ],//课程标签
    page: 1,
    dataSearchArr: [],
    userId: wx.getStorageSync('userId'),
    isChick:false,
    hiddenName: true,//下拉显示
    prizeList:[
      { "prize_name": "课程奖励", "prize_id": 1 },
      { "prize_name": "商品奖励", "prize_id": 2 },
    ],//下拉菜单
    page1:1,
  },

// 页面一进来的数据加载
  onLoad : function (options) {
    var that = this;
    wx.setNavigationBarTitle({ //改变页面标题
      title : '我的收益'
    });
    that.setData({
      userId: wx.getStorageSync('userId')
    });
    wx.request({
      url: app.globalData.linkStr + '/HappyHui/filter/queryOrderByCnd.do',
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      data: {
        page: that.data.page1,
        rows: 10, 
        type_id: that.data.currentTypeId
      },
      success: function (res) {
        console.log(res.data);
        that.setData({
          dataSearchArr: res.data.data.list
        })
      }
    });
  },

// An highlighted block
onReachBottom: function () {//监听用户上拉触底事件
    var that = this;
    // wx.showLoading({
    //   title: '正在加载',
    //   duration: 1500
    // })

    // 下拉加载数据
    var page = that.data.page1+1;//在data中是1
    that.setData({
      page1: page, //更新当前页数
    })
    // that.shuju();//重新调用请求获取下一页数据
    var prizeid = JSON.stringify(that.data.prizeid);//这个是我要加载数据的参数
      wx.request({
        url: app.globalData.linkStr + '/HappyHui/filter/queryOrderByCnd.do',
        method: "POST",
        header: {
          'content-type': 'application/json'
        },
        data: {
          page: that.data.page1,
          rows: 10,
          type: prizeid,//1课程2商品
          type_id: that.data.currentTypeId//1.分润\r\n2.区域\r\n3.推荐分利}
        },
        success: function (res) {
          console.log(res.data);
          var arr1 = that.data.dataSearchArr; //从data获取当前dataSearchArr数组
          var arr2 = res.data.data.list; //从此次请求返回的数据中获取新数组
          console.log(arr1);
          console.log(arr2)
          arr1 = arr1.concat(arr2)
          that.setData({
            dataSearchArr: arr1
          })
        }
      });
  },

其实也可以把加载的那块数据疯转起来

// 封装的数据请求
  shuju:function(e){
    var that=this;
    var prizeid = JSON.stringify(that.data.prizeid);
    var currentTypeId = that.data.currentTypeId;
    //根据商品和课程查询
    wx.request({
      url: app.globalData.linkStr + '/HappyHui/filter/queryOrderByCnd.do',
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      data: {
        page: that.data.page1,
        rows: 10,
        type: prizeid,//1课程2商品
        type_id: currentTypeId//1.分润\r\n2.区域\r\n3.推荐分利}
      },
      success: function (res) {
        console.log(res.data);
        var arr1 = that.data.dataSearchArr; //从data获取当前datalist数组
        var arr2 = res.data.data.list; //从此次请求返回的数据中获取新数组
        arr1 = arr1.concat(arr2)
        // var content = that.data.datalist.concat(res.data.data.list)
        that.setData({
          dataSearchArr: arr1
        })
      }
    });
  },

// 
onLoad : function (options) {
    var that = this;
    wx.setNavigationBarTitle({ //改变页面标题
      title : '我的收益'
    });
    that.setData({
      userId: wx.getStorageSync('userId')
    });
    that.shuju();//直接调用
  },

onReachBottom: function () {//监听用户上拉触底事件
    var that = this;
    // wx.showLoading({
    //   title: '正在加载',
    //   duration: 1500
    // })

    // 下拉加载数据
    var page = that.data.page1+1;//在data中是1
    that.setData({
      page1: page, //更新当前页数
    })
    that.shuju();//重新调用请求获取下一页数据？
  },