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

在列表数据的时候，一般都会有分页，因为如果一次性都加载出来的话，会造成卡顿的现象，浪费用户的流量，所以就会有下拉刷新，上拉加载。这里我们介绍实现微信小程序的下拉刷新，上拉加载的实现方式：

 1. home.json 参数配置

"enablePullDownRefresh": true

我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是否允许下拉刷新，当然，如何你不想一个个配置允许下拉刷新，你可以直接在全局变量app.json的window里面配置上面这个属性，这样整个项目都允许下拉刷新了,这个一定要加的，因为系统默认是不具备下拉刷新功能的 

2. home.js

 //下拉刷新
  onPullDownRefresh:function()
  {
    wx.showNavigationBarLoading() //在标题栏中显示加载

    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },

onPullDownRefresh 下拉刷新事件监听，具体看一下里面的代码，wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏，由于我们现在还没有讲解网络请求，所以我就模拟了一下网络加载，通过setTimeout方法，写一个时间延迟的方法，这个方法可以模拟网络加载所消耗的时间，还有就是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh() 。

上拉加载

 onReachBottom: function () {
    console.log("监听用户上拉拉动作");
    var that = this;
    GetList(that);
  },