解決vue中使用swiper 插件出錯的問題

更新時間：2021年08月21日 11:24:10 作者：小吳3

這篇文章主要介紹了vue中使用swiper 插件出錯問題及解決辦法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

由于我自己在寫一個demo時候用到了該插件，出現了一些問題，所以就簡單查了一下該插件的用法以及一些常見的錯誤

1.出現Get .../maps/swiper.min.js.map 500(Internal Server Error)

使用min版本時缺少Source Map文件

1. 禁止Source Map提示，刪除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可

2. 如需要使用Source Map，完整包里面有該文件swiper.min.js.map，請放在相應的位置。關于Source Map

2 .出現不能自動輪播，分頁點點不顯示

解決辦法：

install 加版本號。

由于vue-awesome-swiper插件包的版本問題，可能會出現左右箭頭點擊失效的情況

解決方式如下：

npm uninstallvue-awesome-swiper --save

npm installvue-awesome-swiper@3.1.3 --save

安裝完3.1.3的版本后，重新啟動查看就解決了

3.出現Error in render: "TypeError: Cannot set property 'params' of undefined" ---跟版本號有關系，4.0 版本首字母大寫，3.0版本，首字母小寫。

答案鏈接：https://github.com/surmon-china/vue-awesome-swiper/issues/499

如果使用的是3.x版本vue-awesome-swiper@3.x,導入代碼如下:

import { swiper, swiperSlide } from 'vue-awesome-swiper

如果使用的是4.x版本vue-awesome-swiper@4.x,導入代碼如下:

import { Swiper, SwiperSlide } from 'vue-awesome-swiper

4.出現 Uncaught ReferenceError: Swiper is not defined at...

可能是沒有加載JS文件或位置錯誤

解決方式如下：

下載文件包并在頁面中加載Swiper的JS和CSS文件，或使用Swiper的CDN服務加載文件，加載后再初始化Swiper

Vue中使用Swiper的用法如下：

第一種：全局引入

在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper';
 import "swiper/dist/css/swiper.css";
 
 Vue.use(VueAwesomeSwiper)

第二種：局部引入

在所用模塊的js文件中

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
    
    components: {
        swiper,
        swiperSlide
    }
}

在.vue文件中,左右箭頭放在輪播圖的外面，代碼如下：

<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>
 
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>

在.vue文件中,左右箭頭放在輪播圖的里面，代碼如下：

<swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </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>

上面swiperOption的配置信息如下，具體請參考官網：https://www.swiper.com.cn/api/index.html

到此這篇關于vue中使用swiper 插件出錯問題的文章就介紹到這了,更多相關vue使用swiper 插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: