微信小程序 如何翻頁加載更多數據並顯示

一，遇到問題

在開發微信小程序：【澳買】這個項目的時候，當用戶按關鍵詞搜索某個產品的時候，如果搜索結果比較多，

比如100條或者更多，我們不可能也不應該在手機上都給用戶顯示出來的，這個時候怎么辦呢？

 

二，解決思路

方案很簡單，肯定是要用到翻頁的功能了，那問題就轉化為在微信小程序里面我們如何實現翻頁呢？

首先，我們要充分利用手機手指的翻頁功能，比如用戶下滑翻到屏幕底部，我們開始加載一下屏的數據，直到

加載完所有的搜索結果，我們再在手機屏幕底部提示用戶，已經加載完全部產品數據。

 

三，技術實施

你等的干貨來了，請接好：

 1.  微信小程序的已經提供了現成的判斷是否翻到頁面底部回調函數：

onReachBottom

我們只需要把我們的操作邏輯代碼加入這個回調函數即可：

/**
   * Called when page reach bottom
   */
  onReachBottom: function () {
   
    if ( self.data.nomoreData ) {
      this.setData({
        showloading: true,
        loadingMoreTips: '沒有更多商品了'
      });
      return;
    }

    this.setData({
      showloading: true,
    });


    db.collection('pinfo')
      .where({
        cname: db.RegExp({
          regexp: this.data.searchname,
          options: 'i'
        })
      })
      .field({
        _id: true,
        images: true,
        cname: true,
        bname: true,
      }).skip(self.data.totalItems)
      .limit(MAX_PAGE_LIMIT)
      .get({
        success: function (res) {
          self.setData({
            showloading: false,
          });
          if (res.data.length > 0) {
            self.data.totalItems += res.data.length;
            let pitems = self.data.items;
            for (let i in res.data) {
              let pdata = res.data[i];
              pitems.push({
                'id': pdata['_id'],
                'barcode': pdata['_id'],
                'image': app.globalData.pimage_root + pdata['images'][0],
                'name': pdata['cname'],
                'brand_name': pdata['bname']
              });
            }

            //console.log('update items');
            self.setData({
              items: pitems
            });
            
          } else {
            self.data.nomoreData = true;
            self.setData({
              showloading: false,
            });
          }
        },
        fail: function (error) {
          self.setData({
            showloading: false,
          });
        }
      });

  },

 

大家注意到沒有，上面的處理邏輯里面用了一個非常重要的變量：

self.data.nomoreData // 用來標識數據是否全部加載完畢

初始化的時候 改變量我們賦值是false，在第58行的時候，會判斷如果沒有數據了，就設置為true了。

page data的 初始化代碼如下：

/**
   * Page initial data
   */
  data: {
    showloading: false,
    nomoreData: false,
    searchname: '',
    totalItems: 0,
    items: [],
    loadingResult: '努力加載...',
    loadingMoreTips: '玩命加載中...'
  },