脚本宝典收集整理的这篇文章主要介绍了记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%;
}

脚本宝典总结

以上是脚本宝典为你收集整理的记vue使用swiper插件遇到的坑全部内容，希望文章能够帮你解决记vue使用swiper插件遇到的坑所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。