前言

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

首先是引入

npm i swiper

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

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

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

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

踩坑2：引入位置

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

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

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

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

我的代碼：

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

踩坑4：版本更迭導(dǎo)致無法通用

最簡單的一個，前進(jìn)后退的屬性

官網(wǎng)3的示例：

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

官網(wǎng)的版本7的示例:

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

這里采用的是官網(wǎng)版本7才能生效

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

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

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

官網(wǎng)的官方api、swiper3以及swiper7的示例都是同一句

mousewheelControl : true,

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

mousewheel: true,

踩坑5：動態(tài)渲染導(dǎo)致的各種bug。

如果你的輪播數(shù)據(jù)來源是請求數(shù)據(jù)，那么需要補(bǔ)上一句

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

或者干脆做的更絕，直接在list監(jiān)聽里面寫

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)
    }
},

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

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

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

總結(jié)

到此這篇關(guān)于vue2使用swiper4踩坑的文章就介紹到這了,更多相關(guān)vue2使用swiper4踩坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論