记vue使用swiper插件遇到的坑

npm install swiper –save-dev一、在main.js引入swiper的css样式import ‘swiper/dist/css/swiper.css’二、在需要使用的组件里局部引用swiperimport { swiper, swiperSlide } from ‘vue-awesome-swiper’export default { components: { swiper, swiperSlide }}三、html使用注册的组件<div class=“memInfo”> <swiper v-if=“swiperData.length > 0” :options = “swiperOption”> <swiper-slide v-for="(item,index) in swiperData" :key=“index”> <div class=“infoText”> <img :src=“item.headImg”/><span class=“spanOne”> {{item.nickname}}</span><span></span> </div> </swiper-slide> </swiper></div>三、初始化swiper，我习惯在data里面初始化data() { return { swiperOption:{ direction : ‘vertical’, slidesPerView: 5, loop: true,//需要数据渲染之后才起作用，用v-if控制数据渲染完在加载组件 observeParents:true, observer:true, autoplay: { disableOnInteraction: false, delay:500 } }, }}然后就会发现为什么没有显示轮播图。那是因为css样式写得不好，swiper容器没有高度，所以没有显示。解决：在swiper外面包着一层div设置其高度和宽度。并且swiper会有一个默认属性swiper-container，必须使其属性继承memInfo的高度和宽度，这是为了使swiper容器有高度，才会显示。.memInfo .swiper-container{ width: 100%; height: 100%;}