vue3滑动测试代码test

<template>
  <div>
    <transition name="slide-fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <div class="content-container" :key="currentPage">
        <div v-for="(item, index) in currentItems" :key="index" class="item">
          {{ item }}
        </div>
      </div>
    </transition>

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

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`), // 示例数据
      pageSize: 4,
      currentPage: 0,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.pageSize);
    },
    currentItems() {
      const start = this.currentPage * this.pageSize;
      const end = start + this.pageSize;
      return this.items.slice(start, end);
    },
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages - 1) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--;
      }
    },
    beforeEnter(el) {
      el.style.transform = 'translateX(100%)';
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetWidth; // trigger reflow
      el.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
      el.style.transform = 'translateX(0)';
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
      el.style.transform = 'translateX(-100%)';
      el.style.opacity = 0;
      done();
    },
  },
};
</script>

<style>
.content-container {
  display: flex;
  flex-direction: column;
}

.item {
  margin: 10px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.slide-fade-enter-active, .slide-fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
  opacity: 0;
  transform: translateX(-100%);
}
</style>