如何在uniapp中实现分页

在uniapp中实现分页，可以使用scroll-view组件结合分页器组件来实现。具体实现步骤如下：

1. 在scroll-view组件上设置scroll-y属性为true，表示开启纵向滚动。

2. 在scroll-view组件内部添加列表内容，可以使用v-for指令动态生成列表项。

3. 在分页器组件上设置总页数和当前页数，可以使用计算属性动态计算总页数。

4. 在分页器组件上监听页码改变事件，根据页码计算需要滚动的距离，然后通过调用scroll-view组件的scrollTo方法实现滚动。

下面是一个示例代码：

<template>
  <view>
    <scroll-view class="scroll-view" scroll-y :scroll-with-animation="true">
      <view v-for="(item, index) in list" :key="index" class="item">{{ item }}</view>
    </scroll-view>
    <paginator :total="totalPage" :current="currentPage" @change="onPageChange"></paginator>
  </view>
</template>

<script>
  import Paginator from '@/components/Paginator.vue';

  export default {
    components: {
      Paginator,
    },
    data() {
      return {
        list: [], // 列表数据源
        pageSize: 10, // 每页显示数量
        currentPage: 1, // 当前页码
      };
    },
    computed: {
      totalPage() {
        // 计算总页数
        return Math.ceil(this.list.length / this.pageSize);
      },
    },
    methods: {
      onPageChange(page) {
        // 页码改变事件
        this.currentPage = page;
        const scrollTop = (page - 1) * this.pageSize * 50; // 计算需要滚动的距离
        uni.pageScrollTo({
          scrollTop,
          duration: 300,
        });
      },
    },
  };
</script>

需要注意的是，这里的列表项高度为50rpx，需要根据实际情况进行调整。同时，需要在scroll-view组件上设置scroll-with-animation属性为true，表示开启滚动动画。