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>