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