swiper 6版本点击左右按钮不生效问题及双图关联问题解决

首先说下这次升级swiper的原因，上次做完一直没上生产，近期其他组的同事发生产带上去了，引发了生产事故，运维反馈，全国一半的人登录系统时页面空白，于是就开始了一系列排查，最终找到是这个swiper的锅，客户用的系统是win7的，谷歌浏览器，版本49！然而swiper并不兼容低版本浏览器，这是前话。后续就开始了6版本的排雷之旅，目前百度也百度不到有用的信息，这篇绝对够使

引入方式

5版本的引入方式为

import 'swiper/css/swiper.css'

6版本稍有不同，上一篇vue中超好用的轮播图组件swiper说的6版本报css引用错误的问题，在这里就可以解决啦~

import 'swiper/swiper-bundle.css'

点击左右按钮不生效

需要给按钮绑定事件

	  prev(){
        this.$refs.swiperTop.$swiper.slidePrev();
      },
      next(){
        this.$refs.swiperTop.$swiper.slideNext();
      }

双图相互控制问题

大轮播图：

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" @slideChange="firstChange">
  <swiper-slide class="itemTop" v-for="(item,index) in imageList" :key="index">
    <div class="swiper-slide">
      <div class="swiper-zoom-container" :ref="'swiperRef' + index"><img :src="item.attachmentUrl"></div>
    </div>
  </swiper-slide>
  <div class="swiper-button-next swiper-button-white" @click="next"></div>
  <div class="swiper-button-prev swiper-button-white" @click="prev"></div>
</swiper>

注意上述slideChange

firstChange(val) {
	this.$refs.swiperThumbs.$swiper.slideTo(val.realIndex, 500, true)
},

小轮播图

<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs" @slideChange="secondChange">
	<swiper-slide class="itemBottom" v-for="(item,index) in imageList" :key="index"><img :src="item.attachmentUrl"  @click="controlTop(index)"></img></swiper-slide>
</swiper>

注意上述slideChange

secondChange(val) {
  this.$refs.swiperTop.$swiper.slideTo(val.realIndex, 500, true)
},

over~