1. 程式人生 > >小程式之上拉載入和下拉重新整理

小程式之上拉載入和下拉重新整理

建立Data

/**
 * 頁面的初始資料
 */   
data: {
    articleInfo: [],
    // 請求資料是否為空的狀態    
    flag: true,
    // 初始為第一頁    
    index: 1,
},

分頁請求資料

 /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    this.getArticleInfo(this.data.index);
  },
  
  getArticleInfo: function(index){
    // 在回撥函式中返回請求的資料  
playModel.getAll({ index: index, success: (res) => { let newArticleInfo = res.object; // 請求資料為空,不請求 if(newArticleInfo.length == 0){ // 修改請求狀態位 false this.setData({flag: false}); wx.showToast({ title: '已經到底~~', icon:
'loading', duration: 2000 }) }else{ // 將請求的資料新增的原來的articleInfo中 let articleInfo = this.data.articleInfo.concat(newArticleInfo); this.setData({ articleInfo }); } } }) },

上拉重新整理

 /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom:
function () { if(this.data.flag){ // 頁數加一 let index = this.data.index + 1; // 更新當前頁 this.setData({index}) // 傳送請求 this.getArticleInfo(index); }else{ wx.showToast({ title: '已經到底~~', icon: 'loading', duration: 2000 }) } },

下拉重新整理

 /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
    // 初始化頁面資料  
    this.setData({
      articleInfo: [],
      index: 1,
      flag: true
    })
    // 傳送請求  
    this.getArticleInfo(this.data.index);
  },