vue2使用swiper4踩坑的示例分析

vue2使用swiper4踩坑的示例分析，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

前言

一開始打算采用最新的swiper7，后來好像是vue2兼容性問題，各種報錯，所以從7退回到6，然后退回到5,5則是遇到鼠標滾輪事件的bug，于是再度回滾，到4終于畫風正常了。

首先是引入

npm i swiper

↑這句話不是復制的，是因為出錯太多，反復引用導致了可以直接手打的地步。

值得一提的是，下載會默認下載7，直接用艾特符號標定不如直接改版本重新下，此時需要在package.json里面調成版本4后重新下載

踩坑1：為了保證穩定，每次在package.json更該版本，最好立即下載當前版本，隨后重啟webstorm。

其他軟件不清楚是否是必須。

踩坑2：引入位置

如果焦急的你看到這篇博客，而且不介意回滾到4的話，可以下載版本4，隨后在需要輪播圖的地方引入這三句話

import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import Swiper from "swiper"

這樣就可以去官網拷代碼了。new Swiper寫在mouted里面。

踩坑3：使用空間，如果是輪播圖內套輪播圖，則需要注意命名，或者干脆采用id獲取

我的代碼：

this.swiper = new Swiper(".swiper-container-son1", {})

踩坑4：版本更迭導致無法通用

最簡單的一個，前進后退的屬性

官網3的示例：

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

官網的版本7的示例:

navigation: {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
 },

這里采用的是官網版本7才能生效

絕大部分都是官網 7生效，但是小部分卻是要版本4才能生效。

還有一個極致坑爹的屬性，滾輪

省略*你媽買菜必超級加倍，跳廣場舞永無C位*等臟話。

官網的官方api、swiper3以及swiper7的示例都是同一句

mousewheelControl : true,

但是，也許是swiper4特供，也許是各種不可名狀的bug，真正在swiper4可用的代碼是

mousewheel: true,

踩坑5：動態渲染導致的各種bug。

如果你的輪播數據來源是請求數據，那么需要補上一句

observer: true,//修改swiper自己或子元素時，自動初始化swiper

或者干脆做的更絕，直接在list監聽里面寫

watch: {
    imgList() {
        setTimeout(() => {
            // eslint-disable-next-line no-unused-vars
            this.swiper = new Swiper(".swiper-container-son1", {
                speed: 1000,
                autoplay: {
                    delay: 4000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                }
            })
        }, 0)
    }
},

這樣可以保證在請求完成之后再執行插件。

附：Vue 引入swiper出錯解決方案參考

• 可能是scss文件未安裝。vue-awesome-swiper 的scss文件要單獨安裝。并不隨包一塊導入。 cnpm install --save swiper swiper/swiper-bundle.css swiper/swiper.scss

關于vue2使用swiper4踩坑的示例分析問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。