介绍如何使用 Vue 实现滑块滑动无缝切换和平滑切换动画

实现步骤

1. 创建 Vue 项目：可以使用 Vue CLI 快速搭建一个新的 Vue 项目。
2. 设计 HTML 结构：创建一个包含滑块容器和滑块项的 HTML 结构。
3. 添加 CSS 样式：设置滑块容器和滑块项的样式，添加过渡动画效果。
4. 编写 JavaScript 逻辑：使用 Vue 的数据绑定和方法来控制滑块的切换。

完整代码

<template>
  <!-- 滑块容器 -->
  <div class="slider-container">
    <!-- 滑块列表 -->
    <div class="slider-list" :style="{ transform: `translateX(-${currentIndex * itemWidth}px)` }">
      <!-- 为了实现无缝切换，复制首尾项 -->
      <div v-for="(item, index) in sliderItems" :key="index" class="slider-item">
        {{ item }}
      </div>
    </div>
    <!-- 上一页按钮 -->
    <button @click="prevSlide">上一页</button>
    <!-- 下一页按钮 -->
    <button @click="nextSlide">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 滑块项数组
      sliderItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      // 当前显示的滑块索引
      currentIndex: 0,
      // 每个滑块项的宽度
      itemWidth: 0
    };
  },
  mounted() {
    // 在组件挂载后，获取滑块项的宽度
    this.itemWidth = this.$el.querySelector('.slider-item').offsetWidth;
    // 开启自动切换定时器
    this.startAutoSlide();
  },
  methods: {
    // 切换到上一页
    prevSlide() {
      if (this.currentIndex === 0) {
        // 如果当前是第一页，将索引设置为最后一项
        this.currentIndex = this.sliderItems.length - 1;
      } else {
        // 否则，将索引减 1
        this.currentIndex--;
      }
    },
    // 切换到下一页
    nextSlide() {
      if (this.currentIndex === this.sliderItems.length - 1) {
        // 如果当前是最后一页，将索引设置为第一页
        this.currentIndex = 0;
      } else {
        // 否则，将索引加 1
        this.currentIndex++;
      }
    },
    // 开启自动切换定时器
    startAutoSlide() {
      this.autoSlideInterval = setInterval(() => {
        this.nextSlide();
      }, 3000);
    },
    // 停止自动切换定时器
    stopAutoSlide() {
      clearInterval(this.autoSlideInterval);
    }
  },
  beforeDestroy() {
    // 在组件销毁前，停止自动切换定时器
    this.stopAutoSlide();
  }
};
</script>

<style scoped>
.slider-container {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}

.slider-list {
  display: flex;
  /* 设置过渡动画，实现平滑切换 */
  transition: transform 0.5s ease-in-out;
}

.slider-item {
  min-width: 600px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

代码注释

• HTML 部分：

  • .slider-container：滑块容器，设置了宽度、高度和溢出隐藏。
  • .slider-list：滑块列表，使用 transform 属性实现滑动效果，通过 translateX 来移动滑块。
  • .slider-item：每个滑块项，设置了宽度、高度和背景颜色。
  • 两个按钮分别用于切换上一页和下一页。

• JavaScript 部分：

  • data：定义了滑块项数组、当前索引和每个滑块项的宽度。
  • mounted：在组件挂载后，获取滑块项的宽度，并开启自动切换定时器。
  • prevSlide：切换到上一页，如果当前是第一页，则切换到最后一页。
  • nextSlide：切换到下一页，如果当前是最后一页，则切换到第一页。
  • startAutoSlide：开启自动切换定时器，每隔 3 秒切换一次。
  • stopAutoSlide：停止自动切换定时器。
  • beforeDestroy：在组件销毁前，停止自动切换定时器。

• CSS 部分：

  • .slider-list：使用 transition 属性设置过渡动画，实现平滑切换。

使用说明

1. 创建 Vue 项目：

   vue create slider-project
   cd slider-project
   

2. 替换 App.vue 文件内容：将上述代码复制到 src/App.vue 文件中。

3. 运行项目：

   npm run serve
   

4. 访问项目：在浏览器中打开 http://localhost:8080，即可看到滑块滑动无缝切换和平滑切换动画的效果。