微信小程序 实现分页加载数据

实现分页加载数据要用到页面加载触底事件

onReachBottom: function () {

}

首先在 js 定义初始数据

data: {
//用来接收后端数据
      list:[],
//当前页
      current_page:1
  }

然后定义请求接口函数

article:function(){
    var that = this,list = this.data.list
    wx.request({
      url: '', //接口地址
      data: {
        page:that.data.current_page//当前页
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
           console.log(res)
        //接口数据返回判断当前页是否为第一页 不是第一页将查到的数据拼接到list后
        if(res.data.data.current_page==1){
            that.setData({
               list:res.data.data.data
            })
        }else{
          that.setData({
            list:list.concat(res.data.data.data)
          })
        }
        
      }
    })
  }

在页面加载事件，下拉刷新，上拉触底事件中引用请求接口函数

onLoad: function (options) {
      this.article()
  },
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.data.current_page=1
    this.article()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      this.data.current_page++
      this.article()
  }

wxml中进行wx:for 循环输出数组元素 样式自定义

<view wx:for="{{list}}" class="box">
        {{item}}
</view>