在Vue中使用了Swiper ,从后台获取动态数据后,swiper滑动失效

原因是因为Swiper提前初始化了,然而数据还没有加载完成。解决方法如下:

1、在Swiper初始化时

swiper0 = new Swiper('.w0', {
    initialSlide :0,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper
    slidesPerView: 5,
    spaceBetween: 10,
    loop: false,
    initialSlide:2,
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

2、使用Vue提供的$nextTick()方法

this.$nextTick(function(){
    var swiper0 = new Swiper('.w0', {})
})

 

posted @ 2020-09-27 09:56  糖糖Y  阅读(761)  评论(0编辑  收藏  举报