關於vue2使用swiper4的踩坑記錄

Posted on by

前言

一開始打算采用最新的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踩坑的文章就介紹到這瞭,更多相關vue2使用swiper4踩坑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：