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

加载更多，其实就是再次向接口发送请求，把返回的数据，追加到渲染页面的数组里的过程，具体实现实例如下：

demo.js

// pages/project/project.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    //每页显示的行数：
    pagesize: 7,
    //页码（从1开始）：
    p: 1,

    //排序方式：
    paixu: 'viewcount',
    //升序或降序：
    order: 'desc',
    
//用于标识是否还有更多的状态
    state: 1,

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

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


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


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


  /**
   * 页面上拉触底事件的处理函数，与点击加载更多做同样的操作
   */
  onReachBottom: function () {
    var mythis = this;
    wx.showLoading({
      title: '玩命加载中...',
    });
    mythis.data.p = mythis.data.p + 1;
    getproinfo(this.data.pagesize, this.data.p,mythis);
  wx.hideLoading();

  },

 
})

/**
 * 获取项目列表
 */
function getproinfo(pagesize, p,  mythis){
 
  wx.request({
    url: app.globalData.host + 'index.php/Ho/getproinfo',
    method: 'post',
    data: {
      pagesize: pagesize,
      p:p
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded' 
    },

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

 

demo.html

 <view class='projectlist' >
    <view class='project'  wx:for="{{arrayProject}}"  wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}" bindtap='projectDetail'>
      <view class='projectText'> {{itemProjec.gongchengmingcheng}} </view>
      <view class='projectleibie label'> {{arrayCategory[itemProjec.leixing].name}} </view>
      <view class='projectjiesuan label'> {{arraySchedule[itemProjec.jieduan].name}} </view>
      <view class='projectTime'> {{itemProjec.faburiqi}} </view>
    </view>

<!--

实现点击“加载更多”时进行加载

<view class='remind' bindtap='loadMore' wx:if="{{state==0}}"><view><<加载更多<<</view></view>

<view class='remind' wx:elif="{{state==0}}"><view>没有更多了</view></view>

-->

//实现屏幕上拉加载更多
    <view class='remind' wx:if="{{state==0}}"><view>没有更多了</view></view>
  </view>