vue列表实现滑动分页

在Vue.js中实现滑动分页功能，通常会结合`v-for`指令、`v-bind:key`以及一些自定义组件或者事件处理。以下是一个简化的步骤：

1. **数据管理**：首先，你需要一个包含所有数据的数组，并设置每页显示的数据量（例如 `pageSize`），还有当前页数 (`currentPage`)。

data() {
  return {
    items: [], // 列表数据
    pageSize: 10,
    currentPage: 1,
  };
},

2. **计算分页范围**：通过计算属性（computed）获取需要展示的起始索引和结束索引。

computed: {
  start() {
    return (this.currentPage - 1) * this.pageSize;
  },
  end() {
    return Math.min(this.start + this.pageSize, this.items.length);
  },
  paginatedItems() {
    return this.items.slice(this.start, this.end);
  }
}

3. **模板部分**：在HTML模板中，你可以使用`v-for`遍历`paginatedItems`，并添加一个滑动区域监听用户滚动事件。

<div class="scroll-container" @scroll="onScroll">
  <ul>
    <li v-for="(item, index) in paginatedItems" :key="index">{{ item }}</li>
  </ul>
</div>

4. **滚动监听函数**：在`methods`里定义`onScroll`函数，检查用户是否已经到达了最后一个页面的底部，如果到了则增加页码。

methods: {
  onScroll(e) {
    if ((e.target.scrollHeight - e.target.scrollTop) === e.target.clientHeight && e.target.scrollTop !== 0) {
      this.currentPage++;
    }
  }
}

5. **分页导航**：最后，可以添加分页按钮，当点击时更新`currentPage`，或者使用更复杂的插件如`vue-paginatejs`来增强用户体验。

<div>
  <button @click="currentPage = (currentPage > 1 ? currentPage - 1 : 1)">上一页</button>
  <button @click="currentPage = (currentPage + 1 <= Math.ceil(items.length / pageSize)) ? currentPage + 1 : currentPage">下一页</button>
</div>