vue.js - 我在 Vue 2 中使用 Swiper.js 做错了什么?
问题描述
正如标题所说,我正在尝试将 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>
解决方案
不必要的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 语法slot="slotName"
发生了变化, now也是如此v-slot:slotName
,它必须应用于 a <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>
推荐阅读
- javascript - Firebase - 使用变量作为属性获取字段
- python - 如何将动态文件名发送到 PipeLine?
- android - 可点击的 Cardview 打开另一个活动
- forms - 显示相同的值并保存在表单中
- mysql - mysql 在一个查询中进行各种分组
- html - 将 XXXL 添加到引导程序
- r - 如何最好地拆分 tibble 中的字符串并仅保留与 dplyr/R 中所需字符串匹配的项目?
- python - Python - 设置任意轮廓xy比率
- flutter - Flutter ListView.builder 去除多余的间距
- php - 如何在for循环中获取当前值?