在vue中使用swiper做分类选项卡渲染时遇到的坑

公司产品最近一个版本要求是要做一个分类的选项卡，选项卡可以滑动，可以点击不同分类显示不同的关卡

当时公司是用了swiper插件来做的，可是swiper一般是用来做轮播图，相比较之下还是差别比较大的，奈何我又是一个比较懒的程序猿，只能将swiper来完成需求了~~

第一步是要引入文件，我随便写一个大概的样子

<script src="swiper.min.js"></script>

第二步是需要套用模板，我们翻看官方的介绍

这里是需要说明一下的就是我当时.swiper-container用的是header标签，.swiper-wrapper用的是ul标签，.swiper-slide用的是li标签，标签对这些并没有影响，我就是随便叨叨~~

<header class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(val,index) in classArr" :key="index" v-cloak >{{val.name}}</li>
    </ul>
</header>

第三步是配置相关的属性，直接上代码

<script>
    var swiper = new Swiper('.swiper-container',{
        slidesPerView: 'auto',
        freeMode: true,
        slidesOffsetAfter: 15,
        roundLengths:true
    })
</script>

写到这里，基本的东西就出来，但是出现了bug：就是渲染出来的东东，你会发现基本上是无法翻页，无法进行滚动，原因是第三步配置属性执行的时候，页面只渲染出了一个li，所以整个滚动轮播图只有一个slide。

查阅swiper官方文档之后，发现了有趣的东东：

所以我们需要在配置属性里面加入这个监控，当子元素发生改变的时候，自动初始化swiper

<script>
    var swiper = new Swiper('.swiper-container',{
        slidesPerView: 'auto',
        freeMode: true,
        observer: true,
        slidesOffsetAfter: 15,
        roundLengths:true
    })
</script>

这样子，一个漂亮的分类选项卡页面就完成了~