vue实现页面左右滑动

Vue 实现页面左右滑动

在 Vue 中实现页面左右滑动可以通过多种方式完成，以下是几种常见的方法：

使用 CSS 和 Vue 事件

通过 CSS 的 transform 和 Vue 的事件监听实现滑动效果。

<template>
  <div class="slider-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <div class="slider-content" :style="{ transform: `translateX(${translateX}px)` }">
      <div class="slide">Slide 1</div>
      <div class="slide">Slide 2</div>
      <div class="slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      translateX: 0,
      startX: 0,
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      const currentX = e.touches[0].clientX;
      this.translateX = currentX - this.startX;
    },
  },
};
</script>

<style>
.slider-container {
  overflow: hidden;
  width: 100%;
}
.slider-content {
  display: flex;
  transition: transform 0.3s ease;
}
.slide {
  min-width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px solid #ccc;
}
</style>

使用第三方库（如 Swiper）

Swiper 是一个流行的滑动库，支持 Vue 集成。

安装 Swiper：

npm install swiper vue-awesome-swiper

使用示例：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    };
  },
};
</script>

<style>
.swiper-container {
  width: 100%;
  height: 300px;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px solid #ccc;
}
</style>

使用 Vue 动画过渡

通过 Vue 的 <transition-group> 实现滑动动画。

<template>
  <div class="slider">
    <button @click="prev">Prev</button>
    <transition-group name="slide" tag="div" class="slider-content">
      <div v-for="(slide, index) in slides" :key="index" v-show="currentIndex === index" class="slide">
        {{ slide }}
      </div>
    </transition-group>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      currentIndex: 0,
    };
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    },
  },
};
</script>

<style>
.slider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-content {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px solid #ccc;
}
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用 Vue 手势库（如 Hammer.js）

Hammer.js 是一个手势库，可以识别滑动事件。

安装 Hammer.js：

npm install hammerjs

使用示例：

<template>
  <div ref="slider" class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const slider = this.$refs.slider;
    const hammer = new Hammer(slider);
    hammer.on('swipeleft', () => {
      console.log('Swiped left');
    });
    hammer.on('swiperight', () => {
      console.log('Swiped right');
    });
  },
};
</script>

<style>
.slider {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.slide {
  min-width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  border: 1px solid #ccc;
}
</style>

以上方法可以根据需求选择，CSS 和 Vue 事件适合简单场景，Swiper 提供丰富功能，Vue 动画过渡适合动态内容，Hammer.js 适合复杂手势交互。