微信小程序分页效果实现

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 () {

  }
})


猜你喜欢

转载自blog.csdn.net/yuyuking/article/details/78796406
今日推荐