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">
    <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 class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>
 
<style>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

4. 在Vue中创建导航栏

<template>
  <div>
    <nav>
      <ul>
        <li v-for="(item, index) in navList" :key="index" :class="{active: currentIndex === index}" @click="currentIndex = index">{{item}}</li>
      </ul>
    </nav>
    <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>
  </div>
</template>
 
<script>
import Swiper from 'swiper'
 
export default {
  data() {
    return {
      currentIndex: 0,
      navList: ['Slide 1', 'Slide 2', 'Slide 3']
    }
  },
  mounted() {
    const swiper = new Swiper('.swiper-container', {
      initialSlide: this.currentIndex,
      on: {
        slideChange: () => {
          this.currentIndex = swiper.activeIndex
        }
      }
    })
  }
}
</script>
 
<style>
nav {
  display: flex;
  justify-content: center;
 
  ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
 
    li {
      margin: 0 10px;
      cursor: pointer;
 
      &.active {
        color: #f60;
      }
    }
  }
}
</style>

这样就可以将Swiper轮播和导航栏整合在一起使用了。