vue-awesome-swiper实现左右切换滑动tab菜单

Loop模式+ Slides分组，点击左右按钮按组滑动循环切换，点击menu切换标签页

html

<!-- 标签页菜单 -->
<div class="menu-ul">
              <div class="swiper-button-prev" slot="button-prev" @click="prev"><img height="16" src="左按钮.png"/></div>
              <swiper class="swiper" ref="mySwiper" :options="swiperOption">
                <swiper-slide><span :class="{'menu':menuId===0}">menu1</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===1}">menu2</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===2}">menu3</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===3}">menu4</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===4}">menu5</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===5}">menu6</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===6}">menu7</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===7}">menu8</span></swiper-slide>
                <swiper-slide><span :class="{'menu':menuId===8}">menu9</span></swiper-slide>
              </swiper>
              <div class="swiper-button-next" slot="button-next" @click="next"><img height="16" src="右按钮.png"/></div>
            </div>
<!-- 标签页内容 -->
<div class="menu-content">
        <div v-show="menuId===0"><h1>menu1</h1></div>
        <div v-show="menuId===1"><h1>menu2</h1></div>
        <div v-show="menuId===2"><h1>menu3</h1></div>
        <div v-show="menuId===3"><h1>menu4</h1></div>
        <div v-show="menuId===4"><h1>menu5</h1></div>
        <div v-show="menuId===5"><h1>menu6</h1></div>
        <div v-show="menuId===6"><h1>menu7</h1></div>
        <div v-show="menuId===7"><h1>menu8</h1></div>
        <div v-show="menuId===8"><h1>menu9</h1></div>
</div>

以下配置具体含义可点击此链接查看

js

let vm = null;
export default{
	data(){
		return{
			 menuId: 0,
              swiperOption: {
                slidesPerView: 6, //设置slider容器能够同时显示的slides数量
                speed: 500, //滑动速度
                spaceBetween: 21, //slide之间的距离（单位px
                slidesPerGroup: 6, //定义slides的数量多少为一组
                centeredSlides : false, //设定为true时，活动块会居中，而不是默认状态下的居左
                loop: true, //会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的
                loopFillGroupWithBlank: true, //不到6个的组，剩下的slice会用空白填满
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev'
                },
                on:{
                //slice点击事件
                  click: function() {
                    const that= this;
                    vm.handleClickSlide(that); //引用：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
                  }
                },
                allowTouchMove:false, //禁止手动拖动滑动
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                preventLinksPropagation: false //拖动Swiper时阻止click事件,如果没有禁止拖动需要设置此项
              }
		}
	},
	methods:{
		//左右切换
		  prev () {
            this.$refs.mySwiper.$swiper.slidePrev()
          },
          next () {
            this.$refs.mySwiper.$swiper.slideNext()
          },
          //切换标签页
          handleClickSlide(vmm){
            this.menuId = vmm.clickedIndex - vmm.activeIndex + vmm.realIndex; //获取点击的slice下标赋值给menuId来控制标签页的显示; 
            //activeIndex返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
            //realIndex当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
            //clickedIndex返回最后点击Slide的索引
            //可能是分组的原因，realIndex，activeIndex返回的是组的索引，而不是单个slice的索引，clickedIndex从6开始索引，所以需要这样处理获取准确的slice下标
          }
	},
	 created(){
        vm = this;
     }
}

‘>>>’可以覆盖swipe本身的样式

css

/* 覆盖按钮本身样式，使用img是为了兼容ie，swipe本身的按钮样式是在after里设置的font-family*/
>>>.swiper-button-prev, >>>.swiper-button-next{
      position: relative;
      margin: 16px 0 9px 0;
      color: rgb(101,101,101);
      top: 0;
      left: 0;
      right: 0;
    }
    >>>.swiper-button-prev:after{
      content: none;
    }
    >>>.swiper-button-next:after{
      content: none;
    }
    .menu-ul{
      width: 1200px;
      display: flex;
      align-items: center;
      height: 62px;
    }
    .menu-list{
      width: 1128px;
      display: flex;
      align-items: center;
      height: 62px;
      background: #FFFFFF;
      font-size: 16px;
      color: #666666;
    }
    >>>.swiper-slide{
      width: 120px;
      position: relative;
      height: 62px;
      line-height: 36px;
      flex-shrink: 0;
    }
    .swiper-slide span{
      display: block;
      padding: 16px 0 9px 0;
      height: 62px;
    }
   /* 以下样式是为了提升用户体验，增加的鼠标移入移出动效 */
    >>>.swiper-slide:after{
      content: '';
      position: absolute;
      display: inline-block;
      width: 0px;
      height: 3px;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 0;
      background-color: #09BA51;
      transition-property: all;
      transition-duration: 0.15s;
      transition-timing-function: ease;
      transition-delay: 0s;
    }
    >>>.swiper-slide:hover{
      color: #222222;
      cursor: pointer;
    }
    >>>.swiper-slide:hover:after{
      content: '';
      width: 120px;
      height: 3px;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 0;
      background-color: #09BA51;
    }
    .menu{
      color: #222222;
    }
    .menu:after{
      content: '';
      position: absolute;
      display: inline-block;
      width: 120px !important;
      height: 3px;
      left: 0;
      right: 0;
      margin: auto;
      bottom: 0;
      background-color: #09BA51 !important;
      transform: scaleX(1) !important;
    }