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

过时的广告位语法

Vue 2.6.0 中的slot syntax发生了变化，所以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>

缺少 next/prev 按钮处理程序

您的 next/prev 按钮没有 click 事件处理程序，因此它们什么都不做。您可以将模板引用添加到 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

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

What am I doing wrong with Swiper.js in Vue 2?

vue.js

swiper

swiperjs

不需要 `div` 包装器

过时的广告位语法

缺少 next/prev 按钮处理程序

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

What am I doing wrong with Swiper.js in Vue 2?

vue.js

swiper

swiperjs

不需要 div 包装器

过时的广告位语法

缺少 next/prev 按钮处理程序

不需要 `div` 包装器