主页 / coding / 问题 / 76955686
Accepted
Matthew
Asked: 2023-08-23 01:40:19 +0800 CST

如何为滑动器制作暂停/继续按钮

  • 772

我在这个论坛搜索了一些相关代码。我使用 autoplay.stop() 暂停并使用 autoplay.start() 继续。但我想将 2 个按钮加入 1 个按钮（初始暂停图像，按下后更改为启动图像）。如何一键切换暂停和重启？

我的工作： 在此输入图像描述

网页：

<template>
    <!-- Pause btn -->
    <div class="flex gap-2">
     <button>
      <img src="src/image/button/pause.png" @click="swiperPause" />
     </button>
     <button @click="swiperCont">continue</button>
    </div>
</template>

脚本：

<script>
export default{
methods: {
    swiperPause() {
      this.swiper.autoplay.stop();
    },
    swiperCont() {
      this.swiper.autoplay.start();
    },
  },
}
</script>
vue.js

2 个回答

  1. Best Answer

    您可以将启动/停止功能合并为一个，并使用数据属性来决定运行哪一个：

    const app = Vue.createApp({
  data() {
    return {
      swiperState: 'continue'
    }
  },
  methods: {
    swiperAction() {
      if(this.swiperState === 'continue') {
        this.swiperState = 'pause'
        //this.swiper.autoplay.start()
      } else {
        this.swiperState = 'continue'
        //this.swiper.autoplay.stop();
      }
    },
  },
})
app.mount('#demo')
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="flex gap-2">
     <button @click="swiperAction">{{ swiperState }}</button>
    </div>
</div>

    • 0

  2. 最后答：

    模板：

    <button @click="swiperAction">
  <div v-if="swiperState === 'play'">
    <img src="src/image/button/pause.png" />
  </div>

  <div v-if="swiperState === 'stop'">
    <img class="scale-150" src="src/image/button/play.png" />
  </div>
</button>

    脚本：

    swiperAction() {
  if (this.swiperState === "play") {
    this.swiperState = "stop";
    this.swiper.autoplay.start();
  } 
  else {
    this.swiperState = "play";
    this.swiper.autoplay.stop();
  }
},
    • 0

相关问题