记vue使用swiper插件遇到的坑

npm install swiper --save-dev

一、在main.js引入swiper的css样式

import 'swiper/dist/css/swiper.css'

二、在需要使用的组件里局部引用swiper

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
       swiper,
       swiperSlide
    }
}

三、html使用注册的组件

    
        
            

                 {{item.nickname}}
            
        
    

三、初始化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%;
}