脚本宝典收集整理的这篇文章主要介绍了解决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 插件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的解决vue中使用swiper 插件出错的问题全部内容,希望文章能够帮你解决解决vue中使用swiper 插件出错的问题所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。