vue数据加载分页功能

需求背景：

我们在手机端加载数据时，一般需要请求历史数据时，需要进行分页，因为手机运行需要快，所以不做一下子加载太多条的数据

vue-infinite-loading

这里我们用的是vue-infinite-loading这个插件来实现

安装

npm install vue-infinite-loading --save 或者
yarn add vue-infinite-loading

引入

<template>
  <infinite-loading
     :identifier="infiniteId"
      @infinite="infiniteHandler"
      ref="infiniteLoading"
   >
     <span slot="no-more">
       <!-- 没有更多数据了... -->
     </span>
     <div slot="no-results" class="no-result">
        <img src="@img/img/app/nomore_icon.png" alt="" />
          <p>暂无可兑换礼品</p>
     </div>
  </infinite-loading>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading'
    components: {
      InfiniteLoading
    }
</script>

注意，你的数据显示内容区需要设置CSS

.main{
    position: absolute;
    top 116px
    bottom 0
    width 100%
    overflow auto
}
/**设置你无数据时显示图片的样式**/
/deep/ .no-result, .no_more{
  display inline-blocke
  padding 20px 0
  img{
    width 300px
    height  300px
  }
}

使用

// 获取你的接口数据
infiniteHandler ($state) {
      this.showLoading = true
      this.$api.myPrizes({ exchangeStatus: this.currentTab,  pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
          this.showLoading = false
          if (res.code === 200) {
            if (res.result && res.result.records && res.result.records.length) {
              this.prizes = this.prizes.concat(res.result.records)
              this.pageIndex++
              if (res.result.records < this.pageSize) {
                $state.loaded()
                $state.complete()
              } else {
                console.log('pageinde', this.pageIndex)
                $state.loaded()
              }
            } else {
              $state.complete()
            }
          } else {
            this.$refs.Errormes.ErrormesFun(res.message)
            $state.complete()
          }
        })
    }