当前位置：首页 > VUE

vue tab实现左右滑动

2026-02-25 07:10:28VUE

Vue 实现 Tab 左右滑动功能

在 Vue 中实现 Tab 的左右滑动功能，可以通过结合触摸事件（touchstart、touchmove、touchend）和 CSS 过渡效果来实现。以下是具体实现方法：

使用触摸事件监听滑动

通过监听触摸事件，计算滑动距离并切换 Tab：

<template>
  <div 
    class="tab-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <div class="tab-content" :style="contentStyle">
      <div v-for="(tab, index) in tabs" :key="index" class="tab-item">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { content: 'Tab 1' },
        { content: 'Tab 2' },
        { content: 'Tab 3' }
      ],
      currentIndex: 0,
      startX: 0,
      moveX: 0,
      isSwiping: false
    }
  },
  computed: {
    contentStyle() {
      return {
        transform: `translateX(${-this.currentIndex * 100}%)`,
        transition: this.isSwiping ? 'none' : 'transform 0.3s ease'
      }
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.isSwiping = true
    },
    handleTouchMove(e) {
      this.moveX = e.touches[0].clientX - this.startX
    },
    handleTouchEnd() {
      this.isSwiping = false
      if (Math.abs(this.moveX) > 50) {
        if (this.moveX > 0 && this.currentIndex > 0) {
          this.currentIndex--
        } else if (this.moveX < 0 && this.currentIndex < this.tabs.length - 1) {
          this.currentIndex++
        }
      }
      this.moveX = 0
    }
  }
}
</script>

CSS 样式设置

确保 Tab 容器和内容有正确的样式设置：

.tab-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.tab-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.tab-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

使用第三方库实现

可以使用现成的 Vue 滑动组件库简化实现：

安装 vue-awesome-swiper：

npm install swiper vue-awesome-swiper --save

在组件中使用：


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

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

export default { components: { Swiper, SwiperSlide }, data() { return { tabs: [ { content: 'Tab 1' }, { content: 'Tab 2' }, { content: 'Tab 3' } ], swiperOption: { slidesPerView: 1, spaceBetween: 0, resistanceRatio: 0 } } } }

```