swiper在vue中不会自动滑动,

　　本文主要介绍在vue中使用swiper插件时遇到的问题及解决方法。这篇文章很详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。

　　因为写demo的时候用了插件，出现了一些问题，所以简单查了一下插件的用法和一些常见错误。

　　1.得到./maps/wiper.min.js.map500(内部服务器错误)出现。

　　使用最小版本时缺少源映射文件。

　　1.没有源图提示，直接删除swiper.min.js文件的最后一行//# sourcemappingurl=swiper . min . js . Map。

　　2.如果需要使用源码图，文件swiper.min.js.map在完整的包里，请放在相应的位置。关于源地图

　　2.如果有自动转盘，分页点将不会显示。

解决办法：

　　添加要安装的版本号。

　　由于vue-awesome-swiper插件包的版本问题，左右箭头可能无法点击。

　　解决方案如下：

　　NPM uninstall vue-awesome-swiper-save

　　NPM install vue-awesome-swiper @ 3 . 1 . 3-save

　　安装3.1.3版后，重启查看解决问题。

　　3.呈现时出错：“TypeError:无法设置“undefined”的属性“params ”-它与版本号有关。4.0版首字母大写，3.0版首字母小写。

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

　　如果你用的是3.x版vue-awesome-wiper @ 3.x，导入代码如下：

　　从“vue-awesome-swiper”导入{ swiper，swiperSlide }

　　如果你用的是4.x版vue-awesome-wiper @ 4.x，导入代码如下：

　　从“vue-awesome-swiper”导入{ Swiper，SwiperSlide }

　　4.未捕获的引用错误：出现时未定义swiper.

　　可能JS文件没有加载或者位置不对。

解决方式如下：

　　下载包并在页面中加载Swiper的JS和CSS文件，或者使用Swiper的CDN服务加载文件，然后初始化Swiper。

　　Swiper在Vue中的用法如下：

第一种：全局引入

　　在main.js中

　　从“vue-awesome-swiper”导入VueAwesomeSwiper

　　导入“swiper/dist/CSS/swiper . CSS”；

　　Vue.use(VueAwesomeSwiper)

第二种：局部引入

　　在所用模块的js文件中

　　从“vue-awesome-swiper”导入{ swiper，swiper slide }；

　　导入“swiper/dist/CSS/swiper . CSS”；

　　导出默认值{

　　组件：{

　　swiper，

　　瑞士滑梯

　　}

　　在。vue文件，左右箭头放在转盘外面，代码如下：

　　swiper class= swiper :options= swipe option

　　swiper-slide class= swiper-slide v-for= item in 4 :key= item

　　div class= swiper-content“{ item } }/div

　　/swiper-slide

　　 swiper-pagination slot= pagination /div

　　/swiper

　　 swiper-button-prev slot= button-prev /div

　　 swiper-button-next slot= button-next /div

　　在。vue文件，左箭头和右箭头放在转盘内。代码如下：