首先感谢您的宝贵时间,因为我整个上午都在这个问题上度过。如何在vue.JS上使用https://idangero.us/swiper模块?确实在页面上有Swiper,但是似乎没有计算参数。
我也尝试过令人敬畏的轻扫,但我更喜欢使用没有错误的正式版本。导入后,我也尝试在const中初始化swiper。
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<v-touch
@tap="navigateTo(item)"
v-for="item in subList"
:key="item._id"
class="swiper-slide"
>
{{t(item.sentence)}}
</v-touch>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import 'swiper/dist/js/swiper.js'
export default {
name: 'category',
data () {
return {
subList: [{some data}],
}
},
mounted () {
this.initSwiper()
},
methods: {
initSwiper () {
const mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 50
})
mySwiper.init()
}
}
}
</script>
<style scoped>
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
border: solid 2px white;
width: 200px;
height: 200px;
}
</style>
例如,使用此代码,我需要在每个div之间留一个空格或仅2行,但是我没有空格和3行...谢谢您的帮助。
答案 0 :(得分:4)
您现在可以使用此Vue Awesome Swiper它拥有您所需的一切
您可以使用以下命令进行安装
npm install swiper vue-awesome-swiper --save
免责声明:我没有该软件包的隶属关系或贡献者,我只是在使用它。所以我推荐
答案 1 :(得分:2)
您可以像这样简单地使用ref来初始化滑块:
<template>
<div>
<div ref="mySlider" class="swiper-container">
…
</div>
<button @click="next">Next Slide</div>
</div>
</template>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
data () {
return {
slider: null,
mySliderOptions: {
loop: true
}
}
},
methods: {
next() {
this.slider.slideNext()
}
}
mounted () {
this.slider = new Swiper(this.$refs.mySlider, this.mySliderOptions)
}
}
答案 2 :(得分:0)
这似乎可行,不确定是否是一个好方法
父母
<Swiper
:options="carouselOptions"
/>
孩子(Swiper.vue)
<div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">...
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default: () => {
return {
slidesPerView: 1
}
}
}
},
data() {
return {
swiper: null,
}
},
mounted() {
let vm = this;
if (this.options && vm.$refs.swiper !== 'undefined') {
vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
this.swiper = new Swiper(vm.$refs.swiper, {
slidesPerView: this.options.slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
},
resize: function () {
console.log('resize');
}
}
});
}
},
methods: {
}
};
</script>
答案 3 :(得分:-1)
我很久以前也遇到过同样的问题。 最后,我从cdn添加了Swiper,它对我来说效果很好。 我(与Swiper一起)为您提供了一个简单的示例,希望对您有所帮助。
我从here获得了所有CSS道具+ swiper配置,因此可以随时使用它。 有任何问题请告诉我:) 您还可以选中these docs,其中包含有关如何使用Vue&React等进行配置的说明。
new Vue({
el: '#app',
data: {
swiper: null
},
mounted() {
this.swiper = new window.Swiper('.swiper-container', {
cssMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination'
},
mousewheel: true,
keyboard: true,
})
}
})
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 200px !important;
background: pink;
border: 1px solid #888;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
答案 4 :(得分:-2)
mounted : function(){
var swiper = new Swiper('.swiper-container', {
slidesPerView: 7,
spaceBetween: 0,
slidesPerGroup: 7
});
},