在Vue中使用swiper时,轮播页面一直卡在某个页面轮播的解决办法

一. 问题

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>

效果如下:(一直卡在第二张图片轮播,手动去滑也是一直卡在第二张)

在Vue中使用swiper时,轮播页面一直卡在某个页面轮播的解决办法_第1张图片

二. 解决办法

页面请求数据的时候有延迟,所以传递给轮播组件的swiperList数组可能是不完全的数据,当完全拿到数据的时候再渲染轮播组件

<!-- 轮播图部分 -->
<swiper-image :swiper-list="swiperList" v-if="swiperList.length > 0"></swiper-image>

问题得到了解决(完)

你可能感兴趣的:(vue)