VantUI实现list列表分页显示

明知山

发布于 2020-09-03 02:48:01

2.3K00

代码可运行

文章被收录于专栏：前端开发随笔前端开发随笔

运行总次数：0

代码可运行

<template>
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="offset"
      loading-text="正在拼命加载中..."
      finished-text="暂无更多内容了"
      @load="getrecord"
    >
      <div class="row"></div>
    </van-list>
  </div>
</template>

<script>
import { getStudyRecordList } from "../axios/request";
export default {
  data() {
    return {
      record_list: [],
      page: 0,
      loading: false,
      finished: false,
      offset: 0
    };
  },
  mounted() {},
  methods: {
    async getrecord() {
      this.page += 1;
      this.loading = true;
      this.finished = false;
      const res = await getStudyRecordList({ page: this.page, limit: 10 });
      if (res.status == 1) {
        this.record_list = this.record_list.concat(res.data)
        }
        this.loading = false;
      } else {
        this.finished = true;
      }
    }
  }
};
</script>