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 = numthis.isShow = falsethis.$nextTick(() => {this.isShow = true})}} } </script>

4. 到此，在vue中使用swiper就可以正常顯示了。

5. 如果需要根據瀏覽器寬度動態修改 slidesPerView 的數值，會遇到變量修改，但是頁面無效果的情況，是因為swiper沒有更新，這里的解決方案是使用v-if來先銷毀，再重新渲染。

總結

以上是生活随笔為你收集整理的vue中使用swiper，vue-awesome-swiper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。