因为业务需要需要轮播组件,所以选择了vue-awesome-swiper
发现一个坑大家注意一下
直接npm(版本6.10)安装,安装下来的版本是+ [email protected] + [email protected]
npm install swiper vue-awesome-swiper --save
关于使用实例可以从组件官网获取
在官网的参考写法中需要注意两个地方
- CSS文件的引入可能随着版本不一样路径会有所不同,所以一定先要检查css文件的引入
- 安装目前官网的写法还会爆一个错误,在这里特意提一下这个错误的原因
官网的vue实例中,demo是这样子写计算属性的
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
这样写在下面调用该属性的方法是会报错,因为这样子下面的钩子函数中获取不到值。
后来控制台打印了this对象看了看swiper对象中的属性,方法没有$符号应该写成
this.$refs.mySwiper.swiper
修改之后,在修改一下相关参数,调整一下大小,可以正常使用啦