记录vue nuxt+element-ui中使用swiper的问题
1、安装swiper依赖
npm install swiper vue-awesome-swiper --save
2、main.js中全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
// import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3、组件中使用
<div class="power-swiper" v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="index" v-for="(banner,index) in attestation">
<img :src="banner.img">
</div>
</div>
<div class="swiper-button-prev" @click="prev()"></div>
<div class="swiper-button-next" @click="next()"></div>
</div>
swiperOption:{
slidesPerView : 3,
spaceBetween : '2%',
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
//开启循环模式
loop: true
}
prev() {
this.$refs.mySwiper.swiper.slidePrev();
},
next() {
this.$refs.mySwiper.swiper.slideNext();
}
4、问题
可以通过左右滑动图片实现左右切换,左右点击按钮失效
原写法
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
swiperOption:{
slidesPerView : 3,
spaceBetween : '2%',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//开启循环模式
loop: true
}
尝试的解决方案
- 添加observer属性
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
解决
这是swiper官方在vue中设的坑,左右按钮必须自己绑定事件。我使用的是:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200803090021693.png)
解决方法是:
<div class="swiper-button-prev" @click="prev()"></div>
<div class="swiper-button-next" @click="next()"></div>
methods: {
prev() {
this.$refs.mySwiper.swiper.slidePrev();
},
next() {
this.$refs.mySwiper.swiper.slideNext();
}
},
更新:
如果是组件写法,则prev
和next
方法中要用this.$refs.mySwiper.$swiper.slideNext()
参考:https://segmentfault.com/q/1010000023107080