微信小程序实现上拉刷新下拉加载

const util = require('../../../utils/util.js');

let app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    current_page: 1,
    total: 0,
    PullDownRefreshing: false,  //是否正在刷新
    show_no_data: false,        //展示空数据
    show_loading_more: false,   //展示正在加载中
    has_more: false,            //是否有更多
    show_no_more: false,        //展示没有数据了
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取列表信息
    this.getList();
  },
  //下拉刷新
  onPullDownRefresh: function () {
    this.setData({
      "PullDownRefreshing": true
    });
    //初始化数据
    this.initLoadingData();
    this.getList();
  },
  //获取列表数据
  getList() {
    //获取列表数据
    let form_params = this.getSearchParams();
    util.request('xxxxxxxxx', form_params, 'GET').then((res) => {
      let has_more = res.data.current_page >= res.data.last_page ? false : true;
      let show_no_data = (res.data.current_page <= 1 && res.data.data.length <= 0) ? true : false;
      let list = res.data.current_page > 1 ? this.data.list.concat(res.data.data) : res.data.data;

      this.setData({
        "list": list,
        "total": res.data.total,
        "has_more": has_more,
        "show_no_data": show_no_data
      })
      //停止下拉
      if (this.data.PullDownRefreshing) {
        this.setData({
          "PullDownRefreshing": false
        });
        wx.stopPullDownRefresh();
      }
      //加载更多 处理
      if (this.data.show_loading_more) {
        //界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
        setTimeout(function () {
          this.setData({
            "show_loading_more": false,
            "show_no_more": has_more ? false : true
          })
        }.bind(this), 500)
      }
    })
  },
  getSearchParams() {
    return {
      page: this.data.current_page
    }
  },
  //初始化请求数据
  initLoadingData() {
    this.setData({
      "current_page": 1,
      "show_loading_more": false,
      "has_more": false,
      "show_no_more": false,
    })
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (!this.data.has_more || this.data.show_loading_more) {
      return;
    }

    this.setData({
      "current_page": this.data.current_page + 1,
      "show_loading_more": true
    })
    this.getList();
  },
})

针对上述页面请求返回的json如下

{
	"code": 1,
	"msg": "获取成功",
	"data": {
		"total": 1,
		"per_page": 10,
		"current_page": 1,
		"last_page": 1,
		"data": [
			{
				"id": 30,
				"name": "京东便利店",
			}
		]
	}
}