vue 卡片左右切换
时间: 2023-08-18 09:13:02 浏览: 79
你可以使用 Vue.js 中的过渡效果和动画来实现卡片的左右切换。以下是一个简单的实现示例:
```html
<template>
<div class="card-container">
<transition-group name="slide" tag="div">
<div v-for="(card, index) in cards" :key="index" class="card">
{{ card }}
</div>
</transition-group>
<button @click="prevCard" class="prev-button">Prev</button>
<button @click="nextCard" class="next-button">Next</button>
</div>
</template>
<script>
export default {
data() {
return {
cards: ['Card 1', 'Card 2', 'Card 3', 'Card 4'],
currentIndex: 0
};
},
methods: {
prevCard() {
if (this.currentIndex > 0) {
this.currentIndex--;
}
},
nextCard() {
if (this.currentIndex < this.cards.length - 1) {
this.currentIndex++;
}
}
}
};
</script>
<style>
.card-container {
position: relative;
}
.card {
display: inline-block;
width: 200px;
height: 200px;
background-color: #ccc;
margin-right: 10px;
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.5s;
}
.slide-enter,
.slide-leave-to {
transform: translateX(100%);
}
</style>
```
这里使用了 `<transition-group>` 组件来包裹卡片,并添加了 `name="slide"` 属性,以便定义过渡动画的类名。
在 `methods` 中,`prevCard` 和 `nextCard` 方法分别用于切换到前一个和后一个卡片。通过更新 `currentIndex` 的值来改变当前显示的卡片。
在样式中,使用了 CSS 的 `transform` 属性来实现卡片的平移动画效果。
你可以根据自己的需求修改卡片的内容、样式和动画效果。希望对你有帮助!