微信小程序的上拉加载功能

前言

这段时间一直在弄智荟那个微信小程序，发现，很多地方的列表加载都需要用到上拉加载更多这个功能，一开始，看了官方文档觉得蛮简单的，但是在实际写的过程中还是踩了一点的坑，所以就在这做一个简单的总结。

前端页面

在前端页面中，我们使用scroll-view组件去实现这个上拉加载的功能。用bindscrolltolower去触发加载更多事件。

    <scroll-view bindscrolltolower="loadMore" scroll-y="true" class='scroll-content' style="height:{{scrollHeight}}px;">
      <view wx:for='{{results}}' wx:key='{{index}}' bindtap='onDetail' data-item='{{item}}'>
        <view class='search-items'>
          <view class='content-detail'>
            <image class='search-img' resize="cover" src='{{item.image}}' />
            <view class='search-content'>
              <text class='search-title'>{{item.name}}</text>
              <view class='cell-gap'></view>
              <text class='search-type'>{{type[item.type-1]}}</text>
            </view>
          </view>
        </view>
      </view>
      <loading-cell status="{{loadingStatus}}"></loading-cell>
    </scroll-view>

在scroll-view中我动态的改变了其高度，而初始该高度的获取，我使用了微信提供的getSystemInfo来获取。其实，一开始我踩了一个坑，就是这里并没有去这样拿高度，而是根据页面的情况，自己写死了一个高度，以至于一直没有实现效果。

  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  }

我申明了三个变量：pageNo（页码）、pageCount（总页数）、scrollHeight（滚动高度）。

  data: {
    pageNo: 1,
    pageCount: 0,
    scrollHeight: 0
  },

loadMore监听页数的变化，当前页码小于总页数时，请求接口，获取结果。

  loadMore(e) {
    if (this.data.pageNo < this.data.pageCount) {
      this.data.pageNo++
      this.getSearchResults()
    }
  }

请求接口，获取数据。在请求完成的回调中，判断加载状态。

getSearchResults() {
    let url = '/edu/course/getCourseListByPage'
    let self = this
    api.get(url, {
        condition: self.data.searchContent,
        status: 2,
        pageNo: self.data.pageNo,
        pageCount: 10
      },
      function(res) {
      ...
      let array = self.data.results
      array = array.concat(res.content.records) // 这里记住要拼接数组

      self.data.pageCount = res.content.pages // 获取pageCount的值
      if (self.data.pageNo !== res.content.pages) {
           self.setData({
             loadingStatus: 1
           })
         } else {
           self.setData({
             loadingStatus: 2
           })
         }           
      }, null)
  },

为了实现几种加载的动画效果，我写了一个组件loading-cell，根据loadingStatus的值，实现一个动画效果。

<view class='wrapper' wx:if="{{status == 1 || status == 3 || status == 4}}">
  <image class='loading' src="/assets/images/loading.gif" wx:if="{{status == 1}}"></image>
  <image class='no-data' src="/assets/images/a01.png" wx:if="{{status == 4}}"></image>
  <view class='status-label'>{{util.statusString(status)}}</view>
</view>

结束语

整个自定义的一个上拉加载更多效果就做好了，其实，我们还可以采用一次请求后端接口，获取所有的数据，通过改变pageNo的值，按需从所有结果中拿取数据，避免加载一次请求一次结果。