vue中swiper绑定动态数据不滚动

929 阅读1分钟

1.解决Swiper动态加载数据之后就不滚动了

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import 'swiper/dist/js/swiper.min.js';

初始化swiper,添加observer和observeParents

init(){
   var swiper = new Swiper('.swiper-container', {
       slidesPerView: 'auto',   //自定义滑块宽度
       initialSlide: 0,   //默认显示在第几个滑块上,index为索引
       observer: true,   //修改swiper自己或子元素时,自动初始化swiper
       observeParents: true,   //修改swiper的父元素时,自动初始化swiper
    });    
}

2、解决绑定动态数据后,默认显示的是最后一个silder

// 数据请求成功后,再初始化swiper
this.$nextTick(()=>{
      var mySwiper = new Swiper('.swiper-container', {
            //这里面加你想要的参数
      })
 })