微信小程序分页效果实现_小程序分页查询demo

index.js

// pages/bianmin/bianmin.js
var p = 0
var GetList = function (that) {
  wx.request({
    url: url,
    method: "POST",
    data: {
      page: p
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: function (res) {
 
      var l = that.data.list
      for (var i = 0; i < res.data.length; i++) {
        l.push(res.data[i])
      }
      that.setData({
        list: l
      });
      p++;
    }
  });
};
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    page: 0,
    list: [],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    p = 0;
    GetList(that);
    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    p = 0;
    this.setData({
      list: [],
    });
    var that = this
    GetList(that)
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉")
    var that = this
    GetList(that)
    console.log(p)
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})