vue h5 纵向叠层卡片 实现异性轮播

要实现异性轮播的纵向叠层卡片，可以考虑使用 Vue.js 中的动画和过渡效果来实现。

首先，需要将卡片按照层级进行分组，并在每个组内实现水平轮播。可以使用 CSS3 中的 transform 和 transition 属性来实现水平轮播效果。

接下来，使用 Vue.js 中的 transition 组件和动态绑定 class 的方式来实现纵向叠层效果。可以为每个卡片组定义一个类名，根据组内卡片的位置动态绑定该类名，从而实现卡片的纵向叠层效果。

最后，为了实现异性轮播效果，可以在组件中添加定时器，定时改变卡片组的位置。可以使用 Vue.js 中的 watch 属性来监听卡片组位置的变化，并在变化时触发动画效果，从而实现异性轮播效果。

下面是一个简单的示例代码：

<template>
  <div class="card-container">
    <div v-for="(group, index) in groups" :key="index" :class="['card-group', 'group-' + index]">
      <div v-for="(card, index) in group" :key="index" class="card">
        <img :src="card.imageUrl" />
        <h3>{{ card.title }}</h3>
        <p>{{ card.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        [
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 1',
            description: 'Card 1 description',
          },
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 2',
            description: 'Card 2 description',
          },
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 3',
            description: 'Card 3 description',
          },
        ],
        [
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 4',
            description: 'Card 4 description',
          },
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 5',
            description: 'Card 5 description',
          },
          {
            imageUrl: 'https://picsum.photos/200/300',
            title: 'Card 6',
            description: 'Card 6 description',
          },
        ],
      ],
      groupIndex: 0,
      cardIndex: 0,
    };
  },
  watch: {
    groupIndex() {
      this.animate();
    },
  },
  mounted() {
    setInterval(() => {
      this.cardIndex++;
      if (this.cardIndex >= this.groups[this.groupIndex].length) {
        this.cardIndex = 0;
        this.groupIndex++;
        if (this.groupIndex >= this.groups.length) {
          this.groupIndex = 0;
        }
      }
    }, 3000);
  },
  methods: {
    animate() {
      const cards = document.querySelectorAll('.card-group');
      const currentGroup = cards[this.groupIndex];
      const currentCard = currentGroup.querySelectorAll('.card')[this.cardIndex];

      cards.forEach((card) => {
        card.classList.remove('current', 'prev', 'next');
      });

      currentGroup.classList.add('current');
      const prevGroup = cards[this.groupIndex - 1] || cards[cards.length - 1];
      prevGroup.classList.add('prev');
      const nextGroup = cards[this.groupIndex + 1] || cards[0];
      nextGroup.classList.add('next');

      currentCard.classList.add('active');
      currentCard.addEventListener('transitionend', () => {
        currentCard.classList.remove('active');
      });
    },
  },
};
</script>

<style scoped>
.card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.card-group {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
}

.card-group.current {
  transform: translateY(0);
}

.card-group.prev {
  transform: translateY(-100%);
}

.card-group.next {
  transform: translateY(100%);
}

.card {
  position: relative;
  width: 300px;
  height: 400px;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.card.active {
  opacity: 1;
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 10px;
}
</style>