如何防止点击移动到swiperjs中的下一张幻灯片？答案

【问题标题】：how to prevent click to move to the next slide in swiperjs?如何防止点击移动到swiperjs中的下一张幻灯片？
【发布时间】：2020-09-10 05:52:30
【问题描述】：

如何根据我的逻辑取消点击 swiper 中的下一个按钮？

我在swiperjs 基础上使用swiperjs in vue，并且我想阻止用户滑动或单击按钮以根据我的逻辑功能的结果转到下一张幻灯片。

我试试这个 - 不起作用。

 swiper.on('init', async () => {

    swiper.navigation.$nextEl.on('click', (e) => {
      if (true /* mylogic() */) { e.preventDefault(); }
    });
    ...
 });

还有这个：

  <div @click="onNext" slot="button-next"></div>
  ...
  function onNext(e) {
   if (true /* mylogic() */) { e.preventDefault(); }
  }

没有任何效果 - swiper 仍然移动到下一张幻灯片。

如何防止点击移动到下一张幻灯片？

Code on Codesandbox.io

【问题讨论】：

标签： javascript vue.js swiperjs

【解决方案1】：

通过将滑动选项配置为使用 .swiper-button-prev 触发下一次滑动，它发生在您的点击函数 onNext() 之前。

本质上，您需要防止 swiper 在下一次单击箭头时触发，然后使用 swiper.slideNext() 方法自行实现。

所以。将 ref 添加到 swiper 元素，删除 swiper-button-prev 类，将 onNext() 方法移动到方法对象（它应该在哪里，对吗？），在你的函数中调用 swiper.slideNext() 方法，如果someCondition 为真。

codesandbox...

<template>
  <div id="app">
    <h2>1</h2>
    <swiper ref="mySwiper" :options="swiperOption1">
      <swiper-slide v-for="(game, index) in jackpotGames" v-bind:key="index">
        <div class="game-item game-item__1">
          game_id: {{game.game_id}},
          <br>
          provider: {{game.provider}},
          <br>
          img: {{game.img}}
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev">←</div>
      <div @click="onNext" class="" slot="button-next">→</div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "App",
  components: {
    swiper,
    swiperSlide
  },

  data() {
    return {
      swiperOption1: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        spaceBetween: 16,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar"
        },
        navigation: {
          // nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 8,
            pagination: {
              el: ".swiper-pagination",
              type: "bullets"
            },
            navigation: {}
          }
        }
      },

      jackpotGames: [
        // Removed to save space in this answer.
      ]
    };
  },
  methods: {
    onNext(e) {
      let someCondition = true;
      if (someCondition) {
        this.swiper.slideNext();
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    console.log('swiper', this.swiper);
  }
};
</script>

【讨论】：