记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使用注册的组件

<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%;
}