vue.js 列表数据加载更多

<template>
  <div>
  <!--header-->
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
  <!--header end-->


  <!--container-->
<div>
<a class="mint-cell">
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<div class="hhxh-flex">
<div class="flex-0 text-center w-25 gray">时间</div>
<div class="flex-0 text-center w-25 gray">用户名</div>
<div class="flex-0 text-center w-10 gray">类型</div>
<div class="flex-0 text-center w-20 gray">增值量</div>
<div class="flex-0 text-center w-20 gray">提成</div>
</div>
</div>
</div>
</a>
</div>
<div class="myproperty-achievement-box" style="top: 87px">
<div class="container1-box">
<div>
<mt-loadmore :bottom-method="loadMore" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill=false >
<a class="mint-cell" v-for="item in items">
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<div class="hhxh-flex">
<div class="flex-0 text-center w-25">{{dateFormat(item.bizDate)}}</div>
<div class="flex-0 text-center w-25">{{item.userName}}</div>
<div class="flex-0 text-center w-10">{{item.type}}</div>
<div class="flex-0 text-center w-20">{{item.inreaseAmount}}</div>
<div class="flex-0 text-center w-20">{{item.commission}}</div>
</div>
</div>
</div>
</a>
</mt-loadmore>
</div>
</div>
</div>
<no-data :items="items" :isLoading="isLoading"></no-data>
<!--container end-->


<!--footer-->


<!--fonter end-->
  </div>
</template>


<script>
import comHeader from 'components/comHeader'
import noData from 'components/noData'
import mineIncome from '../SERVICES/mineIncome'
export default {
  components: {
    comHeader,
    noData
  },
  data: () => ({
    headerData: {
      title: '测试',
      toLink: ''
    },
    isLoading: true,
    pageNo: 1,
    pageSize: 10,
    allLoaded: false,
    items: []
  }),
  created () {
    // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子
    this.loadList()
  },
  methods: {
    loadList: function () {
      let bizDate = sessionStorage.getItem('bizDate')
      let startTime = bizDate + ' 00:00:00'
      let endTime = bizDate + ' 23:59:59'
      mineIncome.loadShareDetail(startTime, endTime, this.pageNo, this.pageSize).then(res => {
        this.isLoading = false
        let list = res.t
        if (list.length === 0) {
          // 若数据已全部获取完毕，将绑定到组件bottom-all-loaded属性的变量赋值为true，这样bottom-method就不会再次执行了
          this.allLoaded = true
        } else if (list.length > 0 && list.length <= this.pageSize) {
          for (let i = 0; i <= list.length - 1; i++) {
            this.items.push(list[i])
          }
          if (list.length === this.pageSize) { // 长度达到每页的最大长度，说明后面可能还有数据
            this.pageNo += 1
          } else { // 没有更多的数据了
            this.allLoaded = true
          }
        }
      })
    },
    loadMore: function () {
      // 加载更多数据
      this.loadList()
      // 在加载数据后需要对组件进行重新定位的操作
      this.$refs.loadmore.onBottomLoaded()
    },
    dateFormat: function (date) {
      return window.moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>