一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突

在vue中如何处理同一个页面中有多个swiper，首先我们需要分2中情况：

1、如果在vue中采用 Vue-Awesome-Swiper，如果采用这种方式的话，可以给每个swiper组件添加一个class,来区分，分别建立不同的swiperOption、swiperSlides，具体代码如下：

//swiper组件1
<swiper :options="swiperOptionSwp1">
    <swiper-slide v-for="(slide, index) in swiperSlidesSwp1" :key="index">
    	I'm Slide {{ slide }}
    </swiper-slide>
    <div class="swiper-button-prev swp1"></div>
    <div class="swiper-button-next swp1"></div>
  </swiper> 
  //swiper组件2
  <swiper :options="swiperOptionSwp2">
    <swiper-slide v-for="(slide, index) in swiperSlidesSwp2" :key="index">
    	I'm Slide {{ slide }}
    </swiper-slide>
    <div class="swiper-button-prev swp2"></div>
    <div class="swiper-button-next swp2"></div>
  </swiper> 
  //js部分
  //swiper组件1的配置
  swiperOptionSwp1：{
  		navigation: {
             nextEl: '.swiper-button-next.swp1',
             prevEl: '.swiper-button-prev.swp1',
         },
         loop:false
  },
  //swiper组件2的配置
  swiperOptionSwp2: {
         navigation: {
             nextEl: '.swiper-button-next.swp2',
             prevEl: '.swiper-button-prev.swp2',
         },
         loop:false
     },

2、如果使用的是通用方法建立的swiper,具体如下：

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })     

如果你们是选用的上面这种写法，也可以采用给不同的swiper 添加不同的class区分，代码如下：

<div class="swiper-container swiper1">
    <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-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper2">
    <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-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

//js代码
var mySwiper = new Swiper ('.swiper1', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    pagination: {
      el: '.swiper-pagination.swiper1',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })   
  var mySwiper = new Swiper ('.swiper2', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    pagination: {
      el: '.swiper-pagination.swiper2',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })      

	如有疑问，欢迎交流哟O(∩_∩)O~