点击按钮实现加载更多商品或信息功能

代码如下，直接展示了

<template>
  <div class="about">
    <div class="list">
      <Goods v-for="item in list" :key="item._id" :product="item"></Goods>
    </div>
    <button :disabled="isLoading" @click="loadMoreHandle" class="btn">
      加载更多
    </button>
  </div>
</template>
<script>
import { getList } from "../services/products"; // 接口数据封装
import Goods from "../components/Goods";
export default {
  data() {
    return {
      list: [], // 数据
      pages: 1, // 总页数
      page: 1, // 当前页
      per: 5, // 加载N条数据
      isLoading: false, // 按钮设置
    };
  },
  created() {
    this.loadMoreHandle(); // 创建完成后就立即执行的方法函数
  },
  methods: {
    async loadMoreHandle() {
      this.isLoading = true;
      const res = await getList(this.page, this.per); // 封装接口接收2个参数一个是当前页，一个是一次加载N条数据
      // 扩展运算符
      this.list = [...this.list, ...res.products]; // 数组拼接
      this.pages = res.pages; // 总页数不变
      this.page++; // 当前页码加一
      this.isLoading = false;
    },
  },
  components: {
    Goods,
  },
};
</script>
<style scoped>
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>