vue实现上下翻页

Vue实现上下翻页功能

实现上下翻页功能通常需要处理数据分页和用户交互。以下是几种常见的方法：

使用v-for和计算属性分页

通过计算属性实现数据分页，结合按钮控制当前页码：

<template>
  <div>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>

    <div v-for="item in paginatedData" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的数据数组
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

使用第三方分页组件

可以集成现有UI库的分页组件，如Element UI的Pagination：

<template>
  <div>
    <el-pagination
      layout="prev, pager, next"
      :total="totalItems"
      :page-size="pageSize"
      @current-change="handlePageChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100 // 总数据量
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    },
    fetchData() {
      // 根据currentPage获取数据
    }
  }
}
</script>

无限滚动翻页

对于移动端或需要流畅滚动体验的场景，可以实现无限滚动：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.content }}
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],
      visibleItems: [],
      loading: false,
      currentIndex: 0,
      itemsPerLoad: 10
    }
  },
  mounted() {
    this.loadMore()
  },
  methods: {
    handleScroll(e) {
      const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight
      if (bottom && !this.loading) {
        this.loadMore()
      }
    },
    loadMore() {
      this.loading = true
      // 模拟异步加载
      setTimeout(() => {
        const newItems = this.allItems.slice(
          this.currentIndex,
          this.currentIndex + this.itemsPerLoad
        )
        this.visibleItems = [...this.visibleItems, ...newItems]
        this.currentIndex += this.itemsPerLoad
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style>
.scroll-container {
  height: 500px;
  overflow-y: auto;
}
</style>

键盘事件翻页

为提升用户体验，可以添加键盘事件监听：

mounted() {
  window.addEventListener('keydown', this.handleKeyDown)
},
beforeDestroy() {
  window.removeEventListener('keydown', this.handleKeyDown)
},
methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowUp') {
      this.prevPage()
    } else if (e.key === 'ArrowDown') {
      this.nextPage()
    }
  }
}

每种方法适用于不同场景，可以根据项目需求选择合适的方式。对于大量数据，建议使用分页或无限滚动来优化性能。