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

首先在对应的json文件中开启

"enablePullDownRefresh": true

首先介绍上拉加载的方法

1.data中定义

data: {
  page: 1,
  hasMoreData: true, //是否还有更多数据
  hasFail: false, //获取列表数据是否出错
},

2.请求数据方法

getcompanylist() {
    wx.request({
      method: "GET",
      url: app.globalData.apiUrl,
      header: {
        "Authorization": "Bearer " + app.globalData.token,
      },
      data: {
        page: this.data.page
      },
      success: (res) => {
        if (res.statusCode == 200) {
          wx.hideLoading()
        }
        if (res.data.items == 0) {
          this.setData({
            nodata: true
          });
        } else {
          this.setData({
            nodata: false
          });
        }
        let listData = this.data.page == 1 ? [] : this.data.items;
        this.setData({
          items: listData.concat(res.data.items),
          hasFail: false,
        })
        if (res.data.pages.pageCount <= this.data.page) {
          this.setData({
            hasMoreData: false
          });
        } else {
          this.setData({
            hasMoreData: true,
            page: ++this.data.page
          })
        };
      }
    })
  },

3.上拉方法

onReachBottom: function () {
  this.data.hasMoreData ? this.getcompanylist() : null;
},

下面介绍下拉刷新

onPullDownRefresh: function () {
	this.setData({            //页码还原为1
	   page: 1
    })
    this.getcompanylist()     //方法调用
    wx.stopPullDownRefresh()   //停止当前页面下拉刷新
  },

你可能感兴趣的:(微信小程序,微信小程序,上拉加载,下拉刷新)