社区首页 >问答首页 >我在Vue 2中的Swiper.js做错了什么？

问我在Vue 2中的Swiper.js做错了什么？
EN

Stack Overflow用户

提问于 2021-06-11 22:31:24

回答 1查看 1.6K关注 0票数 0

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

在下面的每一种方法中，我都得到了一个看似完美的导航器，但在这两种方法中，导航都不起作用。我使用的是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应用程序接口也得到了同样的结果：

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

vue.js

swiper

swiperjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-11 23:40:54

不必要的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按钮没有click-event处理程序，因此它们什么也不做。您可以向vue-awesome-swiper元素添加一个模板引用，并获取其swiperInstance属性以获取活动的swiper实例。然后，对next和prev按钮分别使用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>