https://github.com/surmon-china/vue-awesome-swiper
在刚开始vue中使用swiper的时候,按照文档默认下载的是swiper6,这个版本有很多坑,比如分页器不显示等,因此查了很多资料,得到以下解决方案:
1.降低swiper的版本,并安装vue-awesome-swiper
2.输入命令: npm install vue-awesome-swiper swiper@5.4.5 --save 命令完成后我们查看依赖包发现swiper版本已经为5.4.5的了,接下来正常引入就可以了
3.1 全局注册
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3.2 局部注册
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
3.3 添加组件模板
<template>
<div class="hello">
<swiper ref="mySwiper" :options="swiperOptions" v-if="isShow">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
loop: true,
autoplay: {
disableOnInteraction: false,
delay: 3000
},
initialSlide: 0,
slidesPerView: 3,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {
swiper () {
return this.$refs.mySwiper.$swiper
}
},
mounted () {
console.log('Current Swiper instance object', this.swiper)
// this.swiper.slideTo(3, 1000, false)
this.handleClient()
// 根据浏览器的大小动态修改slidesPerView的值,并重新渲染
window.onresize = () => {
return (() => {
console.log(document.body.clientWidth)
this.handleClient()
})()
}
},
methods: {
handleClient () {
if (document.body.clientWidth > 900) {
this.changeSlidesPerView(3)
} else if (document.body.clientWidth <= 900 && document.body.clientWidth > 600) {
this.changeSlidesPerView(2)
} else if (document.body.clientWidth <= 600) {
this.changeSlidesPerView(1)
}
},
changeSlidesPerView (num) {
this.swiperOptions.slidesPerView = num
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
}
}
}
</script>
4. 到此,在vue中使用swiper就可以正常显示了。
5. 如果需要根据浏览器宽度动态修改 slidesPerView 的数值,会遇到变量修改,但是页面无效果的情况,是因为swiper没有更新,这里的解决方案是使用v-if来先销毁,再重新渲染。