解決vue中使用swiper 插件出錯(cuò)的問題
由于我自己在寫一個(gè)demo時(shí)候用到了該插件,出現(xiàn)了一些問題,所以就簡(jiǎn)單查了一下該插件的用法以及一些常見的錯(cuò)誤
1.出現(xiàn)Get .../maps/swiper.min.js.map 500(Internal Server Error)
使用min版本時(shí)缺少Source Map文件
1. 禁止Source Map提示,刪除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可
2. 如需要使用Source Map,完整包里面有該文件swiper.min.js.map,請(qǐng)放在相應(yīng)的位置。關(guān)于Source Map
2 .出現(xiàn)不能自動(dòng)輪播,分頁(yè)點(diǎn)點(diǎn)不顯示
解決辦法:
install 加版本號(hào)。
由于vue-awesome-swiper插件包的版本問題,可能會(huì)出現(xiàn)左右箭頭點(diǎn)擊失效的情況
解決方式如下:
npm uninstallvue-awesome-swiper --save
npm installvue-awesome-swiper@3.1.3 --save
安裝完3.1.3的版本后,重新啟動(dòng)查看就解決了
3.出現(xiàn)Error in render: "TypeError: Cannot set property 'params' of undefined" ---跟版本號(hào)有關(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文件或位置錯(cuò)誤
解決方式如下:
下載文件包并在頁(yè)面中加載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的配置信息如下,具體請(qǐng)參考官網(wǎng):https://www.swiper.com.cn/api/index.html
到此這篇關(guān)于vue中使用swiper 插件出錯(cuò)問題的文章就介紹到這了,更多相關(guān)vue使用swiper 插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js更改調(diào)試地址端口號(hào)的實(shí)例
今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號(hào)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue3.0 proxy設(shè)置代理不成功的問題及解決方案
這篇文章主要介紹了vue3.0 proxy設(shè)置代理不成功的問題及解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)或工作有一定幫助,感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過程
這篇文章主要介紹了Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過JSON文件生成對(duì)應(yīng)的區(qū)域下拉框,element-china-are插件,包括distpicker插件,通過代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng),需要的朋友可以參考下2023-02-02