微信小程序上拉下拉刷新

小程序提供了，onPullDownRefresh和onReachBottom兩個事件函數監聽下拉和上拉事件函數。提示加載中，取消加載中

 

效果：

 

 

js文件

// pages/enterprise/enterprise.js
var app = getApp();
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    enterpriseList: [],
    pageNo: 1, //頁數
    pageSize: 10, // 條數
    cityCode: null // 城市編碼
  },

  //查詢數據
  queryData: function() {
    var that = this;
    var pageNo = this.data.pageNo;
    var pageSize = this.data.pageSize;
    var provinceCode = "220000";
    var cityCode = wx.getStorageSync("cityCode");

    wx.showLoading({ //彈出頁面加載中
      title: '加載中...',
    });

    wx.request({
      url: xxxxxx //上線的話必須是https，沒有appId的本地請求貌似不受影響 
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 
      header: {
        'Content-Type': "application/x-www-form-urlencoded",
        'Cookie': 'SESSION=' + wx.getStorageSync("sessionId")
      }, // 設置請求的 header
      data: {
        pageIndex: pageNo,
        pageSize: pageSize,
        companyDivisoinCode: provinceCode + "|" + cityCode + "|"
      },
      success: function(res) {
        app.consoleLog("請求數據成功");
        app.consoleLog(res.data)
        wx.hideLoading(); //隱藏加載中提示
        if (res.data.dataList.length > 0) {
          if (that.data.enterpriseList.isEmpty) {
            that.setData({ // 設置頁面列表的內容
              enterpriseList: res.data.dataList,
            })
          } else {
            that.setData({ // 設置頁面列表的內容
              enterpriseList: that.data.enterpriseList.concat(res.data.dataList),
              totalPageCnt: res.data.totalPageCnt,
            })
          }
        } else {
          wx.showToast({
            title: "沒有更多數據了",
            duration: 1000,
            icon: 'none',
            mask: true
          })
        }
      },
      fail: function() {
        wx.hideLoading(); //隱藏加載中提示
        wx.showToast({
          title: "請求失敗！",
          duration: 1000,
          icon: 'none',
          mask: true
        })
      },
      complete: function() {
        // complete 
      }
    })
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    this.setData({
      globalData: app.globalData
    });
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {
    this.setData({ //刷新操作初始化數據
      pageNo: 1,
      list: [],
      isEmpty: true
    })
    this.queryData(); //查詢數據
  },

  /**
   * 頁面   上拉觸底事件的處理函數
   */
  onReachBottom: function() {
    var pageNum = this.data.pageNo;

    if (pageNum < this.data.totalPageCnt) {
      this.setData({
        pageNo: pageNum + 1 //設置下一頁
      })
      this.queryData(); //查詢數據
    } else {
      wx.showToast({
        title: "沒有更多數據了",
        duration: 1000,
        icon: 'none',
        mask: true
      })
    }

  },

  onShow: function(e) {

    if (!this.data.cityCode) { // 頁面首次加載時cityCode=null，查詢數據
      this.refreshData();
    } else if (this.data.cityCode != wx.getStorageSync("cityCode")) { // 當地區改變時加載數據，此時避免二級頁返回時重新加載
      this.refreshData();
    }

  },
  // 重新加載數據
  refreshData: function (){
    this.setData({
      enterpriseList: [],
      pageNo: 1, //頁數
      pageSize: 10, // 條數
      cityCode: wx.getStorageSync("cityCode"), //保存當前城市編碼
    });
    this.queryData();
  }
})