本节我们看一下微信小程序开发会员管理的充值记录展示，今天从同事那里换得两张美元，给大家展示一下。话说美元的这个色泽和图案还是有点单调，一个华盛顿，一个Jackson。

废话不多说，我们看一下会员充值记录界面，无图无真相。

看到没，这是一些充值记录，也有分页，当你滚动到底部的时候，就会加载下一页。

先看一下UI代码，如下

<import src="../../components/customtoast/customtoast.wxml" />
<template is="toast" data="{{ ..._toast_ }}" />

<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="loadMoreConsume">
  <view wx:if='{{rechargeRecord.data&&rechargeRecord.data.length>0}}'>
    <view class="orderDetails" wx:for="{{rechargeRecord.data}}" wx:key="ID">
      <view class="orderListTitle">
        <text class="userName">{{hotelName}}</text>
        <text class="orderStatus">充值成功</text>
      </view>
      <view class="orderListDetails">
        <view class="productImg">
          <image src="{{defaultImg}}" background-size="cover"></image>
        </view>
        <view class="productInfo">
          <view class="productTitle">充值日期: {{item.InDate}}</view>
          <text class="productPrice">操作员：{{item.InUser}}</text>
        </view>
      </view>
      <view class="productCount">
        <view>
          <text>金额：</text>
          <text class='value'>￥{{item.Amount}}</text>
        </view>
      </view>
    </view>
  </view>
  <view wx:else class='orderList'>
    <text class='empty-text'>暂无消费记录</text>
  </view>
</scroll-view>

<loading hidden="{{submitTipHidden}}">
  获取中...
</loading>

因为要滚动所以我们就使用scroll-view组件，设置可Y轴滚动。为了能够精准滚动，我们在页面加载的时候会计算滚动的高度，所以height是绑定的。然后有个bindscrolltolower事件用来处理将滚动条拖动到底部时加载下一页数据。这里wx:for标签类似于angular中的ngFor，是一个循环处理，通过循环可以构造出列表。

var appInstance = getApp()
const loadingText = '正在加载......';

Page({
  rechargePageIndex: 1,
  isFirstLoad: true,

  /**
   * 页面的初始数据
   */
  data: {
    submitTipHidden: true,
    rechargeRecord: {
      data: null,
      loadingText: loadingText
    },
    defaultImg: '../../images/cash.png',
    scrollHeight: 0,
    hotelName: appInstance.globalData.hotelName
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    // 页面渲染完成
    this.getDeviceInfo()
    this.rechargeShow()
  },

  getDeviceInfo: function() {
    let that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },

  rechargeShow: function() {
    if (this.isFirstLoad) {
      this.getRechargeList(1)
    }
    this.isFirstLoad = false;
  },
  getRechargeList: function(pageIndex, isAppend = false) {
    let that = this;
    this.getConsumeRecords(pageIndex, null, null, (res) => {
      var loadingText = '';
      if (!res || res.length == 0) {
        loadingText = '暂无充值记录';
      }

      if (isAppend && (!res || res.length == 0)) {
        wx.showToast({
          title: '已加载完全部'
        })
        return;
      }

      if (!isAppend || !that.data.rechargeRecord.data ||
        !that.data.rechargeRecord.data.length) {
        that.setData({
          rechargeRecord: {
            data: res,
            loadingText: loadingText
          }
        });
      } else {
        var orgData = that.data.rechargeRecord.data;
        orgData = orgData.concat(res);
        that.setData({
          rechargeRecord: {
            data: orgData,
            loadingText: loadingText
          }
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    this.rechargePageIndex = 1;
    this.getRechargeList(1);
  },

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

  },

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

  },
  getConsumeRecords: function(pageIndex = 0, startDate = null, endDate = null, func = null) {
    let that = this
    that.setData({
      submitTipHidden: false
    });
    var tokenInfo = wx.getStorageSync('tokenInfo');
    var customerInfo = wx.getStorageSync('customerInfo');
    let url = appInstance.AppConstant.CUSTOMERURL + '/recharge?userno=' + customerInfo.UserNo + '&pageIndex=' + pageIndex +
      '&pageSize=5' + '&timestap=' + new Date().getTime();

    appInstance.HTTP.wxRequest({
      url: url,
      method: 'GET',
      header: {
        'authorization': 'bearer ' + tokenInfo.access_token
      }
    }).then(res => {
      that.setData({
        submitTipHidden: true
      });

      if (res && res.length > 0) {
        for (let item of res) {
          item.InDate = appInstance.Util.formatTime(new Date(item.InDate));
        }
      }

      if (typeof func == "function") {
        func(res);
      }

    }).catch(err => {
      that.setData({
        submitTipHidden: true
      });
      wx.showToast({
        title: '网络异常，获取信息失败',
      })
    })
  },
  loadMoreConsume() {
    this.rechargePageIndex = this.rechargePageIndex + 1;
    this.getRechargeList(this.rechargePageIndex, true);
  }
});

页面load以后，会拿到页面的高度，用来精确计算拖动的高度。然后当我们将滚动条拖到scroll-view的底部的时候，就会触发bindscrolltolower事件，调用loadMoreConsume方法，页码加1，请求本业数据。ok，其实就是这么简单。