如何为Swiper实现单按钮切换暂停/播放功能

要把两个按钮合并为一个切换按钮，核心是用状态变量跟踪Swiper的播放状态，根据状态动态切换图标和执行对应操作，具体修改如下：

1. 新增状态变量 #

在组件的data中添加isPlaying变量，初始值设为true（因为Swiper默认自动播放，初始显示暂停图标）：

export default{
  data() {
    return {
      isPlaying: true
    }
  },
  // 原有代码...
}

2. 编写切换方法 #

替换原来的两个独立方法，新增一个toggleSwiperPlay方法，根据当前状态执行暂停/播放操作，并反转状态：

methods: {
  toggleSwiperPlay() {
    if (this.isPlaying) {
      this.swiper.autoplay.stop();
    } else {
      this.swiper.autoplay.start();
    }
    this.isPlaying = !this.isPlaying;
  }
}

3. 修改模板结构 #

删除两个按钮，只保留一个，通过动态绑定切换图片路径，点击事件绑定新的切换方法：

<template>
  <div class="flex gap-2">
    <button @click="toggleSwiperPlay">
      <img :src="isPlaying ? 'src/image/button/pause.png' : 'src/image/button/play.png'" alt="切换播放状态" />
    </button>
  </div>
</template>

注意事项 #

• 确保你已准备好播放状态的图标（play.png），并替换代码中对应的文件路径。
• 初始状态isPlaying: true对应Swiper默认自动播放的场景，若你的Swiper初始是暂停状态，可将初始值改为false。

内容的提问来源于stack exchange，提问作者Matthew