用uniapp写一个分页组件

以下是一个简单的示例代码：

<template>
  <view>
    <view v-for="(item, index) in dataList" :key="index">{{ item }}</view>
    <view v-if="showLoadMore" class="load-more" @click="loadMore">点击加载更多</view>
  </view>
</template>

<script>
export default {
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    loadData: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      pageNum: 1,
      dataList: [],
      showLoadMore: true
    };
  },
  methods: {
    async loadMore() {
      this.pageNum++;
      const newData = await this.loadData(this.pageNum, this.pageSize);
      if (newData.length === 0) {
        this.showLoadMore = false;
      }
      this.dataList = this.dataList.concat(newData);
    }
  },
  async created() {
    const newData = await this.loadData(this.pageNum, this.pageSize);
    if (newData.length === 0) {
      this.showLoadMore = false;
    }
    this.dataList = newData;
  }
};
</script>

<style>
.load-more {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}
</style>

使用方式：

<template>
  <page-list :loadData="loadData"></page-list>
</template>

<script>
import PageList from "@/components/PageList.vue";

export default {
  components: {
    PageList
  },
  methods: {
    async loadData(pageNum, pageSize) {
      // 根据 pageNum 和 pageSize 请求数据
      const res = await uni.request({
        url: "xxx",
        data: { pageNum, pageSize }
      });
      return res.data.list;
    }
  }
};
</script>

该组件接受两个 props：

• pageSize：每页数据条数，默认为 10。
• loadData：一个异步函数，用于根据 pageNum 和 pageSize 请求数据，返回一个数组。该函数为必需项。

内部维护了一个 pageNum 和一个 dataList，分别表示当前页码和已加载的数据列表。在 created 钩子中调用 loadData 方法加载第一页数据，然后在 loadMore 方法中根据 pageNum 和 pageSize 加载更多数据，直到返回数据为空。当数据已全部加载完毕时，隐藏加载更多按钮。