微信小程序 如何翻页加载更多数据并显示

一，遇到问题

在开发微信小程序：【澳买】这个项目的时候，当用户按关键词搜索某个产品的时候，如果搜索结果比较多，

比如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: '玩命加载中...'
  },