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

当一个列单的记录有多条时,我们需要上拉自动加载下面的内容,当我们添加记录后,有时候页面会反应不过来,这时候就用到我们的下拉刷新了,下面讲解一下自动加载和刷新。。。。

第一步:我们在列表页的js代码中写一个公共方法来进行控制加载和刷新(类在page外面写)我用的方法为loadmore(方法可以起任意名)

var page = 1;
var isfinish = false;//加载完毕

function loadmore(that) {
  if (isfinish) return;

  wx.showLoading({
    title: '正在加载',
  })
  wx.request({
    url: 'http://www.litao1314.top/server/index.php/home/index/index',
    data: {
      page: page,
      // condition:that.data.condition
    },
    success: (res) => {
      console.log(res);
      wx.hideLoading();
      if (res.data.length > 0) {
        var list = that.data.list;
        // console.log(list);
        for (var i = 0; i < res.data.length; i++) {
          list.push(res.data[i]);
        }
        that.setData({ list: list });
        page++;
      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
    }
  })
}
第二步:在json文件中定义下拉(第一个必选,下面两个任选)
  "enablePullDownRefresh":true,
  "onReachBottomDistance":true,
  "navigationBarTitleText":"动态"
第三步:在js中的 onPullDownRefresh(下拉刷新), onReachBottom(上拉加载)方法中引用上面的公共函数
  //下拉刷新
  onPullDownRefresh: function () {
    console.log("下拉刷新");
    // wx.showNavigationBarLoading() //在标题栏中显示加载
    page = 1;
    isfinish = false;
    this.setData({ list: [] });

    loadmore(this);
  },

  onReachBottom: function () {
    console.log('上拉加载')
    var that = this;
    loadmore(that);
  },
这样就基本完成了,当然别忘了对页面要进行分页显示哦!!!!!!

猜你喜欢

转载自blog.csdn.net/sunshine_penple/article/details/80428873