vue实现上下翻页

实现上下翻页功能

在Vue中实现上下翻页功能，可以通过按键监听或按钮点击来触发翻页动作。以下是两种常见的实现方式：

按键监听实现翻页

<template>
  <div @keydown.up="prevPage" @keydown.down="nextPage" tabindex="0">
    <!-- 页面内容 -->
    <p>当前页码: {{ currentPage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  },
  mounted() {
    // 确保div元素能接收键盘事件
    this.$el.focus()
  }
}
</script>

按钮点击实现翻页

<template>
  <div>
    <button @click="prevPage">上一页</button>
    <span>当前页码: {{ currentPage }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

添加动画效果

如果需要更流畅的用户体验，可以添加页面过渡动画：

<template>
  <transition name="page-slide" mode="out-in">
    <div :key="currentPage">
      <!-- 页面内容 -->
      <p>第{{ currentPage }}页内容</p>
    </div>
  </transition>
</template>

<style>
.page-slide-enter-active, .page-slide-leave-active {
  transition: all 0.3s ease;
}
.page-slide-enter {
  transform: translateY(30px);
  opacity: 0;
}
.page-slide-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}
</style>

结合路由实现

对于多页面应用，可以将翻页与Vue Router结合：

<template>
  <div>
    <button @click="goToPage(currentPage - 1)" :disabled="currentPage <= 1">
      上一页
    </button>
    <button @click="goToPage(currentPage + 1)" :disabled="currentPage >= totalPages">
      下一页
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    currentPage() {
      return parseInt(this.$route.query.page) || 1
    }
  },
  methods: {
    goToPage(page) {
      this.$router.push({
        query: { ...this.$route.query, page }
      })
    }
  }
}
</script>

以上实现方式可以根据具体需求进行调整和组合，构建出符合项目要求的翻页功能。