vue实现横向点击滑动

Vue 实现横向点击滑动

使用 CSS 和 Vue 事件绑定

通过 Vue 的 @click 事件绑定和 CSS 的 transform 属性实现横向滑动效果。
定义滑动距离变量，点击按钮时修改该变量，通过计算属性动态绑定样式。

<template>
  <div class="slider-container">
    <button @click="slide(-100)">向左滑动</button>
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="slide-item">
        {{ item }}
      </div>
    </div>
    <button @click="slide(100)">向右滑动</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  },
  methods: {
    slide(distance) {
      this.offset += distance;
    }
  }
};
</script>

<style>
.slider-container {
  overflow: hidden;
  position: relative;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
}
.slide-item {
  flex: 0 0 100px;
  height: 100px;
  margin: 0 10px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用第三方库（如 Swiper）

对于更复杂的滑动需求，可以使用 Swiper 库，它提供了丰富的滑动效果和 API。
安装 Swiper 并集成到 Vue 项目中。

npm install swiper

在 Vue 组件中使用 Swiper：

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

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

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

动态计算滑动距离

根据容器宽度和子元素数量动态计算滑动距离，确保每次滑动一个完整元素。
使用 clientWidth 获取元素宽度，动态调整 offset 值。

<template>
  <div class="slider-container" ref="container">
    <button @click="slide('left')">向左滑动</button>
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }" ref="slider">
      <div v-for="(item, index) in items" :key="index" class="slide-item" ref="items">
        {{ item }}
      </div>
    </div>
    <button @click="slide('right')">向右滑动</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      itemWidth: 0
    };
  },
  mounted() {
    this.itemWidth = this.$refs.items[0].clientWidth + 20; // 包括 margin
  },
  methods: {
    slide(direction) {
      const containerWidth = this.$refs.container.clientWidth;
      const maxOffset = -(this.items.length * this.itemWidth - containerWidth);

      if (direction === 'left' && this.offset < 0) {
        this.offset += this.itemWidth;
      } else if (direction === 'right' && this.offset > maxOffset) {
        this.offset -= this.itemWidth;
      }
    }
  }
};
</script>

响应式滑动

结合 Vue 的响应式特性，监听窗口大小变化，动态调整滑动逻辑。
使用 window.addEventListener 监听 resize 事件，更新滑动参数。

mounted() {
  window.addEventListener('resize', this.handleResize);
  this.handleResize();
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.itemWidth = this.$refs.items[0].clientWidth + 20;
  }
}