vue+swiper实现tab标签和内容区域双向切换

在使用swiper过程中遇到的问题，主要是官网没有关于tab切换的demo，所以记录一下。

先看效果：

具体代码：

data: {
   curIdx:0,
   tabSwiper: '', /* 为了在methods中使用，所以将其先声明一下 */
   tabList: [
   	{
      tabTitle: 'tab1'
    },
    {
      tabTitle: 'tab2'
    },
    {
      tabTitle: 'tab3'
    }
   ]
}
mounted() {
	/* 获取tab中的所有标签 */
    var tabs = document.querySelectorAll('.swiperTab li');
    this.tabSwiper = new Swiper('.swiper-container',{
        initialSlide: this.curIdx, /* 设定初始化时slide的索引 */
        width : 400, /* 根据情况自己设定 */
        height : 300, /* 根据情况自己设定 */
        effect : 'slide', /* 切换效果 默认为"slide"，可设置为"fade，cube，coverflow，flip" */
        autoplayDisableOnInteraction:false,
        speed : 500, /* 滑动速度，单位ms */
        on: {
            /* Swiper5.x版本中的回调函数 */
            slideChange: function(){
                /*类数组遍历*/
                [].forEach.call(tabs, function(tab) {
                    tab.className = "";
                });
                tabs[this.activeIndex].className='active';
            },
        },
    })
},
methods: {
    selectTab(index){
        this.curIdx=index;
        this.tabSwiper.slideTo(index);/*滑动到对应的滑块*/
    },
},

template区域的tab和内容的代码

<ul class="swiperTab">
  /* active的样式自己定义 */
  <li v-for="(item,index) in tabList" :class="{'active':curIdx==index}" @click="selectTab(index)">
	{{item.tabTitle}}
  </li>
</ul>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>