微信小程序上拉加载更多的项目实例以及scroll-view标签的使用

近来团队让写一个小程序项目，在写某个模块首页列表时，打算采用分页方式请求后台，下拉加载更多。

用到官方的一个关键标签 scroll-view。

代码如下：

一.在wxml文件中：

<view class='tipsbar'>共有{{total}}个待签收批次</view>
<view class="navigator-box">
<scroll-view scroll-y="true"  bindscrolltolower="scrollLower">
  <navigator wx:for="{{batchList}}" class="navigator" bindtap='clickDetails' data-obj="{{item}}">
    <view class="list-name"><text class='link'>{{item.sn}}</text>
    </view>
    <view class="list-info">
      <text>{{item.purchaseBatch.sn}}</text>
      <text decode="{{true}}" space="{{true}}">&nbsp;</text>/
      <text decode="{{true}}" space="{{true}}">&nbsp;</text>
      <text>{{item.purchaseBatch.name}}</text>
    </view>
    <view class='list-detail'>
      <text>到货区域：<text class='text-inverse'>{{item.purchaseBatch.place.sn}}</text></text>
      <text>到货数量：<text class='text-inverse'>{{item.allArrivalItemCount}}</text></text>
    </view>
  </navigator>
  <loading hidden="{{!loading}}">正在载入更多...</loading>
  <view class="loadingComplete" hidden="{{!loadingComplete}}">已加载全部</view>
  </scroll-view>
</view>

 二.在js文件中：

var util=require('../../utils/util.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    batchList:[],
    total:0,
    pageNum:1,
    pageSize:8,
    isNullList:true, 
    loading:true,
    loadingComplete:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      batchList: [],
      pageNum: 1,
      isNullList: true,
      loading: true,
      loadingComplete: false
    });
    this.getBatchList();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
   * 请求后台获取数据
   */ 
  getBatchList: function () {
    var that=this;
    var option = {url: '/api/cmdb/arrival/list',
                  data: { pageNum: that.data.pageNum, pageSize: that.data.pageSize}
                 }
    util.request(option).then(function(res){
      if(res.data.data.pageData.length>0){
        var list=[];
          that.data.isNullList ?list = res.data.data.pageData :       
                                list=that.data.batchList.concat(res.data.data.pageData);
          that.setData({
            total: res.data.data.totalRecords,
            batchList:list,
            loading:false
          });
      }else{
        that.setData({
          loadingComplete:true,
          loading:false
        });
       
      }
    })
  },
  /**
   * 上拉加载
   */
  scrollLower:function(){
    var that=this;
    if (that.data.loading==false && that.data.loadingComplete==false){
      that.setData({
        pageNum:that.data.pageNum+1,
        isNullList:false,
        loading:true
      });
      that.getBatchList();
    }
  },

三.在wxss文件中

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navigator-box {
  flex: auto;
  position:relative;
}
.navigator-box scroll-view{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.loadingComplete{
  padding: 10rpx;
  text-align: center;
}

还有以下两点要说明一下：

1. css样式的设置，在这里采用了flex的方式，似乎scroll-view标签正如网上其他文章介绍的那样，有个坑，当height没设置好时，无法触发上拉加载。所以在这里直接避免那个问题，采用flex和定位。

2. 关于上拉加载时的提醒，采用官方的<loading>标签，不需要自己再做一个了。它和加载完成时的提醒采用标志位的思想来区分。具体逻辑可以看js中的代码。

最终效果如下：