vue内检测是否有swiper_记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%;

}