bk-vue/src/views/PostView.vue

<script setup lang="ts">
import type { PostSketch } from '@/models';
import { onMounted, ref } from 'vue';
import { api } from '@/utils/axios';
import PostCard from '@/components/PostCard.vue';

const data = ref<PostSketch[]>([]);
const pageSize = 10;
const isEnd = ref(false);

function nextDatum() {
  if (isEnd.value) {
    return;
  }
  api.postList(pageSize, data.value.length).then((res) => {
    if (res.data.length < pageSize) {
      isEnd.value = true;
    }
    data.value = [...data.value, ...res.data];
  }).catch((err) => {
    console.error(err);
  });
}

onMounted(() => {
  nextDatum();
});

</script>

<template>
  <div>
    <PostCard v-for="item of data" :key="item.id" :target="item" />
    <div v-if="isEnd">
      没有更多了
    </div>
    <div v-else @click="nextDatum">
      显示更多
    </div>
  </div>
</template>

<style scoped>

</style>