vue 使用swiper写一个可滚动的横向导航

好的，你可以按照以下步骤来使用Vue和Swiper写一个可滚动的横向导航：

1. 安装Swiper和Vue-Swiper

npm install swiper vue-awesome-swiper --save

2. 在Vue中导入Swiper

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
Vue.use(VueAwesomeSwiper)

3. 使用Swiper创建轮播组件

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in navList" :key="index" @click="handleClick(index)" :class="{active: currentIndex === index}">{{item}}</div>
    </div>
  </div>
</template>
 
<script>
import Swiper from 'swiper'
 
export default {
  data() {
    return {
      currentIndex: 0,
      navList: ['导航1', '导航2', '导航3', '导航4', '导航5', '导航6', '导航7', '导航8', '导航9', '导航10', '导航11', '导航12']
    }
  },
  mounted() {
    const swiper = new Swiper(this.$refs.mySwiper, {
      slidesPerView: 'auto',
      spaceBetween: 30,
      freeMode: true
    })
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index
    }
  }
}
</script>
 
<style>
.swiper-container {
  padding: 20px 0;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all .3s;
  color: #333;
 
  &.active {
    background-color: #f60;
    color: #fff;
  }
}
</style>

这样就可以创建一个可滚动的横向导航了，使用Swiper的`slidesPerView`属性设置每个导航按钮占据的宽度，使用`spaceBetween`属性设置导航按钮之间的距离，使用`freeMode`属性开启自由模式，让导航按钮可以自由滚动。在点击导航按钮的时候通过`handleClick`方法来改变当前选中的导航，从而改变样式。