一. 问题
Vue项目中使用了vue-awesome-swiper轮播插件,配置好一切参数后,出现了一个问题,轮播图一直卡在第二页滑动。
轮播组件参数如下:
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
bulletClass : 'my-bullet-swiper', // 自定义设置默认类名
bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
},
loop: true, // 无缝循环
autoplay: {
disableOnInteraction: false, // 用户手动操作轮播后,重新开始自动播放
},
direction: 'horizontal', // 水平滑动
slidesPerView: 'auto',
centeredSlides: true, // 居中显示
spaceBetween: 10, // 左右间距10
loopedSlides: 3, // 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)
preventClicksPropagation : false, // 阻止事件冒泡
preventClicks : false, // 阻止触摸跳转
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
}
}
展示轮播的页面引用轮播组件如下: swiperList为展示页面向服务器请求参数以后向轮播组件传递的数组
<!-- 轮播图部分 -->
<swiper-image :swiper-list="swiperList"></swiper-image>
效果如下:(一直卡在第二张图片轮播,手动去滑也是一直卡在第二张)
二. 解决办法
页面请求数据的时候有延迟,所以传递给轮播组件的swiperList数组可能是不完全的数据,当完全拿到数据的时候再渲染轮播组件
<!-- 轮播图部分 -->
<swiper-image :swiper-list="swiperList" v-if="swiperList.length > 0"></swiper-image>
问题得到了解决(完)