vue swiper 制作导航栏

先看效果

代码如下：

<template>
  <div class="sec-history">
    <div class="wrap-year-swiper">
      <swiper class="year-swiper" :options="swiperOption" ref="yearSwiper">
        <div class="swiper-slide yearList"
             id="yearList"
             ref="yearList"
             :key="index"
             v-for="(year, index) in yearList"
             @click="changeYear(index)"
             :class="{active: yearActiveIndex === index}">
          {{year}}
        </div>
      </swiper>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
    <swiper :options="courseSwiperOption" ref="courseSwiper">
      <div class="swiper-slide" :key="course" v-for="course in yearList">
        <p v-html="course"></p>
      </div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'HelloWorld',
  components: { Swiper, SwiperSlide },
  data(){
    let self = this;
    this.$nextTick(()=>{
      let that = this;
    })
    return{
      yearActiveIndex: 0, // 选中的年
      yearList:[2020,2019,2018,2017,2016,2015,2014,2013,2012],
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        slidesPerView: 6, // 左右箭头中的内容总共有几个可见
        slidesOffsetBefore: 5, // 设定slide与左边框的预设偏移量（单位px）
        slidesOffsetAfter: -8, // 设定slide与右边框的预设偏移量（单位px）
        observer: true,
      },
      courseSwiperOption: {
        autoHeight: 'auto', // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        on: {
          slideChange: function() {
            self.yearActiveIndex = this.activeIndex;
            self.$refs.yearSwiper.$swiper.slideTo(this.activeIndex);
          },
        },
      },
    }
  },
  methods:{
    // 点击年份切换内容
    changeYear(yearActiveIndex) {
      this.yearActiveIndex = yearActiveIndex;
      this.$refs.courseSwiper.$swiper.slideTo(yearActiveIndex);
    }
  },
}
</script>

<style scoped lang="scss">
.sec-history {
  width: 100%;
  margin-bottom: 30px;
  .wrap-year-swiper {
    width: 100%;
    position: relative;
    background: #F2F2F2;
    height: 44px;
    line-height: 44px;
    margin-bottom: 15px;

    .swiper-button-prev, .swiper-button-next {
      outline: none;
    }

    .swiper-button-prev {
      left: 0;
    }

    .swiper-button-next {
      right: 0;
    }

    .swiper-button-prev:after, .swiper-button-next:after {
      font-size: 16px;
      color: #333;
    }

    .year-swiper {
      .active {
        color: #2F7DD6;
      }
    }

    .swiper-container {
      width: 86%;
    }
  }
}
</style>

对应的版本为Vue2 和 swipe5

package.json 中需要安装对应的版本

    "node-sass": "^4.14.1",
    "sass": "^1.26.5",
    "sass-loader": "^7.3.1",
    "swiper": "^5.4.5",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^4.1.1"