微信小程序上拉加载更多,无限加载

无限加载,上拉加载

//可以直接拿来用哦~
//每个接口返回数据格式的不同,来修改对应下列方法当中的参数
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

    //每页显示的行数:
    page: 1,
    //页码(从1开始):
    rows: 7,

    //排序方式:
    paixu: 'viewcount',
    //升序或降序:
    order: 'desc',

    //用于标识是否还有更多的状态
    state: 1,

    //用于渲染页面的数组
    arrayProject: [],

    //用于数组的追加和暂存
    allProject: [],
  },


  /**
 * 生命周期函数--监听页面加载
 */
  onLoad: function (options) {
    var mythis = this;
    getproinfo(this.data.page, this.data.rows, mythis)
  },


  /**
     * 点击加载更多时触发
     */
  loadMore: function () {
    var mythis = this;
    wx.showLoading({
      title: '玩命加载中...',
    });
    mythis.data.page = mythis.data.datas.products_list + 1;
    getproinfo(this.data.page,this.data.rows, mythis);
    wx.hideLoading();
  },


  /**
   * 页面上拉触底事件的处理函数,与点击加载更多做同样的操作
   */
  onReachBottom: function () {
    var mythis = this;
    wx.showLoading({
      title: '玩命加载中...',
    });
    //每一次请求接口,开始页数加一
    //例如:第一次时,url/xxx?page=1&rows=7
    //第二次时,url/xxx?page=2&rows=7
    mythis.data.page = mythis.data.page + 1; 
    getproinfo(this.data.page, this.data.rows, mythis);
    wx.hideLoading();

  },
})

/**
 * 获取项目列表
 */
function getproinfo(page, rows, mythis) {

  wx.request({
    url: 'xxxxxxxx',
      method: 'GET',
    data: {
      page: page,  //开始页数
      rows: rows  //每次请求条数
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },

    success: function (res) {
      //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
      if (res.data.datas.hasmore!= true)
        mythis.setData({
          state: 0
        });
      else {
        var state1 = 1;
        //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
        if (res.data.datas.hasmore!= true)
          var state1 = 0;
        //循环将结果集追加到数组后面
        for (var i = 0; i < res.data.datas.products_list.length; i++) {
          mythis.data.allProject.push(res.data.datas.products_list[i]);  //每条数据循环push进去
        }
        mythis.setData({
          userData: mythis.data.allProject,
          state: state1
        });
      }
      console.log(mythis.data.userData)
    },
    fail: function (res) {
      console.log(res);
    }
  });
}



//wxml
//样式需要自己写哦,外层循环,循环内来完成自己所需要的样式,需求等

  {{item.products_name}}
 

你可能感兴趣的:(微信小程序上拉加载更多,无限加载)