Início / coding / Perguntas / 76955686
Accepted
Matthew
Asked: 2023-08-23 01:40:19 +0800 CST

Como fazer o botão pausar/continuar para o swiper

  • 772

Pesquisei algum código relacionado neste fórum. Eu uso autoplay.stop() para pausar e autoplay.start() para continuar. Mas quero juntar 2 botões em 1 (pausa inicial da imagem, depois de pressioná-lo mude para iniciar img). Como posso alternar a pausa e reiniciar com 1 botão?

Meu trabalho: insira a descrição da imagem aqui

HTML:

<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>

Roteiro:

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

2 respostas

  1. Best Answer

    Você pode combinar funções start/stop em uma e usar a propriedade data para decidir qual delas executar:

    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. Resposta final:

    Modelo:

    <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>

    Roteiro:

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

relate perguntas