欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年08月21日 11:24:10   作者:小吳3  
這篇文章主要介紹了vue中使用swiper 插件出錯問題及解決辦法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

1.出現(xiàn)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,請放在相應(yīng)的位置。關(guān)于Source Map

2 .出現(xiàn)不能自動輪播,分頁點點不顯示

解決辦法:

install 加版本號。

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

解決方式如下:

npm uninstallvue-awesome-swiper --save

npm installvue-awesome-swiper@3.1.3 --save

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

3.出現(xiàn)Error in render: "TypeError: Cannot set property 'params' of undefined" ---跟版本號有關(guān)系,4.0 版本首字母大寫,3.0版本,首字母小寫。

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

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

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

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

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

4.出現(xiàn) Uncaught ReferenceError: Swiper is not defined at...

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

解決方式如下:

下載文件包并在頁面中加載Swiper的JS和CSS文件,或使用Swiper的CDN服務(wù)加載文件,加載后再初始化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的配置信息如下,具體請參考官網(wǎng):https://www.swiper.com.cn/api/index.html

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

相關(guān)文章

  • Vue.js更改調(diào)試地址端口號的實例

    Vue.js更改調(diào)試地址端口號的實例

    今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue3.0 proxy設(shè)置代理不成功的問題及解決方案

    vue3.0 proxy設(shè)置代理不成功的問題及解決方案

    這篇文章主要介紹了vue3.0 proxy設(shè)置代理不成功的問題及解決方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • 利用vscode編寫vue的簡單配置詳解

    利用vscode編寫vue的簡單配置詳解

    這篇文章主要給大家介紹了利用vscode編寫vue簡單配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • vue中添加mp3音頻文件的方法

    vue中添加mp3音頻文件的方法

    本篇文章主要介紹了vue中添加mp3音頻文件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • vue實現(xiàn)二級彈框案例

    vue實現(xiàn)二級彈框案例

    這篇文章主要為大家詳細介紹了vue實現(xiàn)二級彈框案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 詳解在Vue中如何使用provide與inject

    詳解在Vue中如何使用provide與inject

    在vue2.0里面provide與inject是以選項式(配置)API的方式在組件中進行使用的,解決的是跨組件(祖孫)間通信的一種方式,本文就來聊聊它們在Vue中具體的使用吧
    2023-03-03
  • 詳解如何實現(xiàn)在Vue中導(dǎo)入Excel文件

    詳解如何實現(xiàn)在Vue中導(dǎo)入Excel文件

    這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件,文中的示例代碼講解詳細,對我們學(xué)習(xí)或工作有一定幫助,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-01-01
  • Vue3的路由守衛(wèi)以及登錄狀態(tài)儲存過程

    Vue3的路由守衛(wèi)以及登錄狀態(tài)儲存過程

    這篇文章主要介紹了Vue3的路由守衛(wèi)以及登錄狀態(tài)儲存過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue router demo詳解

    vue router demo詳解

    這篇文章主要為大家詳細介紹了vue router demo演示代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動

    Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動

    這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框,element-china-are插件,包括distpicker插件,通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動,需要的朋友可以參考下
    2023-02-02

最新評論