当前位置：首页 > VUE

vue 实现滑动门

2026-01-20 02:36:01VUE

滑动门实现方法

在Vue中实现滑动门效果，可以通过动态绑定CSS类和监听事件来实现。以下是几种常见的方法：

使用动态类绑定

通过v-bind:class动态切换样式类，结合CSS过渡效果实现滑动门动画。

<template>
  <div class="slider-container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="activeIndex = index"
      :class="{ 'active': activeIndex === index }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Tab1', 'Tab2', 'Tab3'],
      activeIndex: 0
    }
  }
}
</script>

<style>
.slider-container {
  display: flex;
  position: relative;
}

.slider-container div {
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.active {
  background-color: #42b983;
  color: white;
}
</style>

使用CSS过渡动画

通过Vue的<transition>组件实现更复杂的滑动效果。

<template>
  <div class="slider-wrapper">
    <div class="slider-tabs">
      <div 
        v-for="(tab, index) in tabs"
        :key="index"
        @click="currentTab = index"
        :class="{ 'active': currentTab === index }"
      >
        {{ tab }}
      </div>
    </div>

    <transition name="slide" mode="out-in">
      <div class="slider-content" :key="currentTab">
        {{ contents[currentTab] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['首页', '产品', '关于'],
      contents: ['首页内容', '产品内容', '关于内容'],
      currentTab: 0
    }
  }
}
</script>

<style>
.slider-wrapper {
  width: 100%;
}

.slider-tabs {
  display: flex;
}

.slider-tabs div {
  padding: 10px 20px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #42b983;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门的滑动组件库：

安装vue-awesome-swiper：
```
npm install swiper vue-awesome-swiper
```

实现代码：


<template>
<swiper :options="swiperOption">
 <swiper-slide v-for="(slide, index) in slides" :key="index">
   {{ slide }}
 </swiper-slide>
</swiper>
</template>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css'

export default { components: { Swiper, SwiperSlide }, data() { return { slides: ['Slide 1', 'Slide 2', 'Slide 3'], swiperOption: { pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } } }

```