官方文档:swiper
npm i swiper@5.2.0
<template>
<div>
<div class="swiper">
<div class="swiper-wrapper">
<div v-for="(v, i) in 10" :key="i" class="swiper-slide">
第{{v}}个
</div>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper from "swiper"
import "swiper/css/swiper.css"
export default {
data () {
return {}
},
mounted () {
this.getSwiper()
},
methods: {
getSwiper () {
new Swiper(".swiper", {
slidesPerView: 4, //每组数量
spaceBetween: 5, //间隔(px)
navigation: { //导航按钮
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true//修改swiper的父元素时,自动初始化swiper
})
},
},
}
</script>
<style lang="scss" scoped>
.swiper::v-deep {
overflow: hidden;
width: 100%;
height: 100%;
.swiper-wrapper {
width: 100%;
user-select: none;
}
.swiper-button-prev {
left: 2px;
color: #fff;
}
.swiper-button-next {
right: 2px;
color: #fff;
}
.swiper-button-disabled {
opacity: 0.1;
}
}
</style>
要注意一点,如果你的轮播的数据是接口返回的,要在数据都拿到后再初始化swiper,不然无效
mounted () {
let that = this
this.$nextTick(async () => {
await this.getHelpInfo()
that.getSwiper()
})
},