我在 Vue 2 中使用 Swiper.js 做错了什么？

Question

正如标题所说，我正在尝试将 swiperjs 与 Vue 2 一起使用。我使用了来自 swiper 的 API 和另一个库“vue-awesome-swiper”来尝试让它工作。我用这两种方法都达到了这一点，一切看起来都很正常，但只是导航按钮不起作用，触摸滑动也没有功能。

在以下每种方法中，我都得到了一个看似完美的滑动器，但导航在这两种方法中都不起作用。我正在使用 vue 2.6 和 swiper 6.7。

这是我使用 vue-awesome-swiper 所拥有的：

<template>
  <div>
    <h2 class="swiper-container__title">{{ sliderHeading }}</h2>
    <swiper :options="swiperOption" class="swiper">
      <!-- Loops through item data and creates a carousel item -->
      <div v-for="item in mediaItems" :key="item.id">
        <swiper-slide>
          <item :mediaItem="item"></item>
        </swiper-slide>
      </div>

      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <hr class="carousel-container__separator" />
  </div>
</template>

<script>
import Item from "./Item.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.min.css";

export default {
  name: "swiper-example-pagination-progress",
  title: "Progress pagination",
  components: {
    Item,
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 7,
        spaceBetween: 30,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  props: {
    mediaItems: {
      type: Array,
      default: () => []
    },
    sliderHeading: String
  }
};
</script>

在这里，我自己尝试使用 swiper.js API 得到了相同的结果：

<template>
  <div class="carousel-container wow fadeIn" data-wow-duration="3s">
    <div ref="slider" class="swiper-container">
      <h2 class="swiper-container__title">{{ sliderHeading }}</h2>

      <!-- Loops through item data and creates a carousel item -->
      <div class="swiper-wrapper">
        <div v-for="item in mediaItems" :key="item.id">
          <item class="swiper-slide" :mediaItem="item"></item>
        </div>
      </div>

      <div ref="nextEl" class="swiper-button-prev"></div>
      <div ref="prevEl" class="swiper-button-next"></div>
    </div>

    <hr class="carousel-container__separator" />
  </div>
</template>

<script>
import Item from "./Item.vue";
import Swiper from "swiper";

export default {
  components: {
    Item
  },
  props: {
    mediaItems: {
      type: Array,
      default: () => []
    },
    sliderHeading: String
  },
  mounted() {
    this.slider = new Swiper(this.$refs.slider, {
      init: true,
      slidesPerView: 7,
      loop: true,
      spaceBetween: 14,
      observer: true,
      breakpoints: {
        1145: {
          slidesPerView: 5
        },
        699: {
          slidesPerView: 3
        }
      },
      navigation: {
        nextEl: this.$refs.nextEl,
        prevEl: this.$refs.prevEl
      }
    });
  },
  computed: {},
  methods: {},
  data: function() {
    return {
      slider: null
    };
  }
};
</script>

Answer 1

不必要的div 包装器

vue-aweomse-swiper 期望 swiper-slide 是直接后代，因此删除 div 包装器；并将v-for 和key 属性移动到swiper-slide：

<!-- BEFORE -->
<swiper>
  <div v-for="item in mediaItems" :key="item.id">
    <swiper-slide>
      ...
    </swiper-slide>
  </div>
</swiper>

<!-- AFTER -->
<swiper>
  <swiper-slide v-for="item in mediaItems" :key="item.id">
    ...
  </swiper-slide>
</swiper>

过时的槽语法

slot syntax 在 Vue 2.6.0 中发生了变化，所以 slot="slotName" 现在是 v-slot:slotName，它必须应用于 <template>：

<!-- BEFORE -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

<!-- AFTER -->
<template v-slot:button-prev>
  <div class="swiper-button-prev"></div>
</template>
<template v-slot:button-next>
  <div class="swiper-button-next"></div>
</template>

缺少下一个/上一个按钮处理程序

你的下一个/上一个按钮没有click-event 处理程序，所以它们什么都不做。您可以将模板引用添加到 vue-awesome-swiper 元素，并获取其 swiperInstance 属性以获取活动的 swiper 实例。然后，将swiper.slideNext() 和swiper.slidePrev() 分别用于下一个和上一个按钮。

<swiper ref="swiper">
  <template v-slot:button-prev>
    <div class="swiper-button-prev"
         @click="$refs.swiper.swiperInstance.slidePrev()"></div>
  </template>
  <template v-slot:button-next>
    <div class="swiper-button-next"
         @click="$refs.swiper.swiperInstance.slideNext()"></div>
  </template>
</swiper>

demo