vue項目中swiper修改swiperOptions之後重新初始化及在低版本安卓手機白屏的問題

情景:在vue的項目中使用swiper實現卡片滑動效果,因有需求,需要在點擊某個slide後修改swiperOptions屬性然後重新初始化swiper,(vue-cli3創建的項目,寫法是官方github上vue中的寫法)

嘗試

  1.swiper5 直接實現,修改swiperOptions後,用swiper.destroy()銷燬,然後使用this.$refs.mySwiper.initSwiper()可以實現,但是出現問題,在低版本的安卓手機頁面白屏,報錯Unexpected token....

  2.因爲之前遇到過這種不兼容的問題(改爲低版本的swiper4解決了),所以同樣改爲了swiper4想要實現,但是swiper4中沒有發現有this.$refs.mySwiper.initSwiper()這個方法,嘗試了別的api方法,無效

  3.搜索到很多解釋,都是因爲swiper包沒有轉爲es5導致的,於是嘗試了配置轉換的方法,像添加.babelrc文件,修改babel.config.js, vue.config.js,也裝了依賴,不是報錯就是沒用,也可能是我用錯了

  4.使用直接引入轉換後的swiper.min.js包的方法,原本使用第一行,直接引入組件

我引入了之後因爲使用的還是原本的組件應用方法,所以沒能奏效

  5.使用cdn的引入方法,https://www.swiper.com.cn/cdn/index.html,然後寫法使用 var mySwiper = new Swiper('.swiperBox',...),ok的,只是重新初始化就要用重新new的方式了

  6.因爲,官方提示,所以準備直接把js文件下載下來放入項目用,當我下載下來之後,突然想到,下載下來的文件,跟依賴包裏的文件應該是一樣的,只是可能我之前並沒有用new的方式寫,所以不行,所以嘗試了下,4中截圖的方式,加上new的寫法,發現可以。至此算是解決。

解決

以上4,5,6

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章