uniapp scroll-view分页

在 UniApp 中，你可以使用 `scroll-view` 和一些计算逻辑来实现分页效果。下面是一个简单的示例：

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scrolltolower="loadMore">
      <view class="content">
        <!-- 显示当前页的内容 -->
        <view v-for="item in currentPageData" :key="item.id">{{ item.content }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数量
      totalData: [], // 所有数据
    };
  },
  computed: {
    // 根据当前页码和每页显示的数量计算当前页的数据
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.totalData.slice(start, end);
    },
  },
  methods: {
    // 模拟异步加载更多数据
    loadMore() {
      this.currentPage++;
      // 请求数据并将新数据添加到 totalData 中
      // ...
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  overflow: hidden;
}

.content {
  padding: 10px;
}
</style>

在上面的示例中，我们使用了 `scroll-view` 组件来实现垂直滚动，并监听了 `scrolltolower` 事件来触发加载更多数据的逻辑。`totalData` 数组保存了所有的数据，通过 `currentPage` 和 `pageSize` 计算出当前页的数据并在页面中显示。当滚动到底部时，`loadMore` 方法会更新 `currentPage` 的值，并请求新的数据，然后将新数据添加到 `totalData` 中。

这只是一个简单的示例，你可以根据自己的需求进行相应的调整和扩展。希望能对你有帮助！