小程序随笔9:简单实现列表下拉刷新和上拉加载

小程序实现列表下拉刷新上拉加载更多。本文主本介绍两个方法的使用，分别是：下拉刷新onPullDownRefresh，上拉加载更多onReachBottom，列表实现前面文章中已实现，请参考地址：https://www.jianshu.com/p/44b07a86c8ff。

实现方法：
1、在小程序app.json文件中，对应的window下添加代码：

"enablePullDownRefresh": true,

2、对小程序对应的.js文件中添加data:

data: {
    pageNum: 1,       // 设置加载的第几次，默认是第一次
    isFirstLoad: true,   // 用于判断List数组是不是空数组，默认true，空的数组
    hasMore: false,    // “加载更多”
  }

3、对小程序中，添加 onPullDownRefresh 和 onReachBottom方法

// 下拉刷新
  onPullDownRefresh: function () {
    // 显示导航栏loading
    wx.showNavigationBarLoading();
    // 调用接口加载数据
    //this.loadData();
    // 隐藏导航栏loading
    wx.hideNavigationBarLoading();
    // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
    wx.stopPullDownRefresh();
  },
  // 上拉加载
  onReachBottom(e) {
    let that = this;
    if (that.data.hasMore) {
      that.setData({
        pageNum: that.data.pageNum + 1,  // 每次触发上拉事件，把pageNum+1
        isFirstLoad: false                // 触发到上拉事件，把isFirstLoad设为为false
      });
 
      //that.loadData();
    }
  }

此项目主要介绍两个方法并结合导航栏loading显示正在加载的效果。