微信小程序仿支付宝账单列表

支付宝是咋做的 咱也不知道 先把效果实现了再说 

效果图如下: 

 

js代码 后端根据最后的时间 向后查询size条数据

getData() {
    const params = {
      page: 1,
      size: 10,
      type: this.data.navActive + 1
    }
    const list = this.data.dateList;
    if (list.length <= 0) {
      const month = moment().format('YYYY-MM');
      this.setData({
        dateList: [{
          month,
          count: 0,
          list: []
        }]
      })
      this.getMonthCount(month, 0);
      params.beginAt = moment().format('YYYY-MM-DD HH:mm:ss');
    } else {
      // 有效月份
      const validMonths = this.data.dateList.filter(item => item.list.length > 0);
      // 有效月份的最后一条数据索引
      const lastIndex = validMonths[validMonths.length - 1].list.length - 1;
      params.beginAt = validMonths[validMonths.length - 1].list[lastIndex].createdAt;
    }
    app.ajax('GET', '/api/...', params).then(res => {
      res.data.map(item => {
        this.initDate(item)
      })
    })
  },

  initDate(item) {
    const curMonthIndex = this.data.dateList.length - 1;
    const itemMonth = moment(item.createdAt).format('YYYY-MM')
    // 如果早当前月份 将当前项放入当前月
    if (itemMonth === this.data.dateList[curMonthIndex].month) {
      this.setData({
        [`dateList[${curMonthIndex}].list`]: this.data.dateList[curMonthIndex].list.concat(item)
      })
    } else {
      const month = moment(this.data.dateList[curMonthIndex].month).subtract(1, 'months').format('YYYY-MM');
      const obj = {
        month,
        count: 0,
        list: []
      }
      this.setData({
        [`dateList[${curMonthIndex + 1}]`]: obj
      })
      this.getMonthCount(month, curMonthIndex + 1);
      this.initDate(item)
    }
  },

  /**
   * 获取每月总数
   */
  getMonthCount(month, index) {
    app.ajax('GET', '/api/...', {
      type: this.data.navActive + 1,
      month
    }).then(res => {
      this.setData({
        [`dateList[${index}].count`]: res.data
      })
    }).catch(() => {})
  },

html 

 

<van-tabs class="nav" active="{{ navActive }}" title-active-color="#303ff8" bind:change="onChange">
  <van-tab title="全部积分">
    <view class="nav-main">
      <view class="item" wx:for="{{dateList}}" wx:key="title">
        <view class="title">{{item.month}}月获取 <text class="count">{{item.count}}</text></view>
        <van-cell wx:for="{{item.list}}" wx:key="id" wx:for-item="itm" title="{{itm.title}}" value="+{{itm.points}}" label="{{itm.createdAt}}" />
      </view>
    </view>
  </van-tab>
  <van-tab title="已使用">
    <view class="nav-main">
      <view class="item" wx:for="{{dateList}}" wx:key="title">
        <view class="title">{{item.month}}月已使用 <text class="count">{{item.count}}</text></view>
        <van-cell wx:for="{{item.list}}" wx:key="id" wx:for-item="itm" title="{{itm.title}}" value="-{{itm.points}}" label="{{itm.createdAt}}" />
      </view>
    </view>
  </van-tab>
</van-tabs>