vue中使用swiper 问题
1 不能自动轮播,分页点点不显示
解决办法:
install 加版本号。
在vue中使用swiper插件的方式,请前往这里查看https://blog.csdn.net/friend_ship/article/details/104919781
由于vue-awesome-swiper插件包的版本问题,会出现左右箭头点击失效的情况
解决方式如下:
npm uninstall vue-awesome-swiper --save
npm install vue-awesome-swiper@3.1.3 --save
安装完3.1.3的版本后,重新启动查看就解决了
2 报错 Error in render: "TypeError: Cannot set property 'params' of undefined" ---跟版本号有关系,4.0 版本首字母大写,3.0版本,首字母小写。
答案链接:https://github.com/surmon-china/vue-awesome-swiper/issues/499
If you use vue-awesome-swiper@3.x
, the correct code is:
import { swiper, swiperSlide } from 'vue-awesome-swiper
else if you use vue-awesome-swiper@4.x
, the correct code is:
import { Swiper, SwiperSlide } from 'vue-awesome-swiper
vue 中swiper的用法 如下链接:
https://blog.csdn.net/friend_ship/article/details/104919781
第一种:全局引入
在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的配置信息如下,具体请参考官网:
例子:点击该文字