vue安装vue-awesome-swiper@3实现图片列表缩略图双向控制效果

首先效果图附上

 

npm install vue-awesome-swiper@3 --save-dev

安装时一定要有版本，否则安装完成后极大可能会报错

 main.js文件全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper /* { default options with global component } */)

<swiper> <swiper-slide></swiper-slide></swiper>标签就可以在单页面中正常使用了。

下面是我的template标签里包裹的html代码，目的是动态获取图片列表循环渲染到页面

 <swiper ref="swiper1" class="swiper1" :options="swiperOption1">
    <swiper-slide v-for="(item,index) in preImgList" :key="index">
       <div class="swiper-zoom-container">
          <div class="img-wrap">
             <img :src="item.url" width="100%" height="100%" >
          </div>
          <p class="txt">废弃物</p>
       </div>
     </swiper-slide>
     <div slot="pagination" class="swiper-pagination swiper-pagination-white"/>
     <div slot="button-prev" class="swiper-button-prev"/>
     <div slot="button-next" class="swiper-button-next"/>
  </swiper>
  <swiper ref="swiper2" class="swiper2" :options="swiperOption2" >
     <swiper-slide v-for="(item,index) in preImgList":key="index">
       <div class="swiper-zoom-container">
         <div class="img-wrap">
            <img :src="item.url" width="100%" height="100%">
         </div>
         <p class="txt">废弃物</p>
       </div>
     </swiper-slide>
   </swiper>

下面css代码写好样式，像这样要修改非原生的组件样式，要写到单独的<style lang="scss"></stye>里面，不带scoped。不然样式会不起作用的。

<style lang="scss">
  .swiper1 {
    height: 400px;
    .swiper-slide {
      background-color: #15243B;
    }
    .swiper-zoom-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      .img-wrap{
        height:373px;
        width:716px;
        img{
          object-fit: contain;
        }
      }
      .txt{
        font-size: 16px;
        color:#fff;
        line-height: 34px;
      }
    }
  }
  .swiper2{
    height:180px;
    border:1px solid #3F587A;
    margin-top:14px;
    .swiper-slide {
      // cursor: pointer;
      background-color: #15243B;
    }
    .borderShow{
      border: 3px solid #3cd4fd;
    }
    .swiper-zoom-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      .img-wrap{
        height:136px;
        width:250px;
        margin-top:12px;
        img{
          object-fit: contain;
        }
      }
      .txt{
        font-size: 16px;
        color:#fff;
        line-height: 30px;
      }
    }
    .swiper-slide-active{
      img{
        border:3px solid #3CD4FD;
      }
    }
  }
</style>

接下来重头戏js，在给予swiperOptions属性之后，在实现双向控制时一定要写在updated里面，有两点原因：1、mounted里打印console.log(this.$refs.swiper1)为undefined,所以实现进行不下去

2、updated会在页面每次有更新即触发，而mounted只会在页面建立完成触发一次。

写this.$nextTick是要确保页面搭建完成能够有this或者this.$refs.swiper1。

另外还有一点要注意的是，在我查资料的时候，很多写的是this.$refs.swiper1.$swiper,这样写法是swiper高版本的，我们安装的是vue-awesome-swiper3.多版本的，支持的是this.$refs.swiper1.swiper,要把$去掉，不信的话可以console.log打印出来this.$refs.swiper看里面的是swiper还是$swiper这样就比较确凿了。

<script>
export default {
  data() {
    return {
      noimgUrl: require('../assets/img/nopic.png'),
      preImgList: [
        {id: 0, url: 'https://img1.baidu.com/it/u=262666228,1686642610&fm=26&fmt=auto'},
        {id: 1, url: 'https://img0.baidu.com/it/u=1416201738,4279486216&fm=26&fmt=auto'},
        {id: 2, url: 'https://img0.baidu.com/it/u=2378821321,544368891&fm=26&fmt=auto'},
        {id: 3, url: 'https://img2.baidu.com/it/u=1118985261,4234949595&fm=26&fmt=auto'},
        {id: 4, url: 'https://img1.baidu.com/it/u=3151984749,173677495&fm=26&fmt=auto'},
        {id: 5, url: 'https://img2.baidu.com/it/u=3704585441,2694001779&fm=26&fmt=auto'}
      ],
      swiperOption1: {
        // zoom: true,//双击放大
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer: true,
        observeParents: true,
        grabCursor: true // 抓手
      },
      swiperOption2: {
        slidesPerView: 3,
        spaceBetween: 30,
        direction: 'horizontal',
        centeredSlides: true, // 设置活动块居中
        grabCursor: true, // 抓手,
        slideToClickedSlide: true,
        watchSlidesVisibility: true // 防止不可点击
      }
  }
},
updated() {
  this.$nextTick(() => {
    // 实现swiper双向控制
    const swiperTop = this.$refs.swiper1.swiper
    const swiperThumbs = this.$refs.swiper2.swiper
    swiperTop.controller.control = swiperThumbs
    swiperThumbs.controller.control = swiperTop
  })
 }
}