Question

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

我在swiperjs in vue的基础上使用swiperjs，并且我想防止用户滑动或单击按钮以根据我的逻辑函数的结果进行下一张幻灯片。

我尝试这样做-不起作用。

 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(); }
  }

没有任何效果-滑动器仍然移至下一张幻灯片。

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

Code on Codesandbox.io

Answer 1

通过将swiper选项配置为使用.swiper-button-prev来触发下一次滑动，它发生在您的单击功能onNext（）之前。

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

所以。向swiper元素添加一个ref，删除swiper-button-prev类，将onNext（）方法移动到methods对象（应该在哪里，对吗？），在函数中调用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>

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

1 个答案: