vue-awesome-swiper优化使用

vue-awesome-swiper 实现轮播图和缩略图联动_wxCSDN1997的博客-CSDN博客

上篇博客已经叙述了vue-awesome-swiper 插件的基本使用，接下来是将它正式用在项目里面的时候遇到的一些问题记录下来。

1.  由于左右切换的按钮（b图）是插件自动带的，如果我们想要给他重新设置背景图，例如下面这种样式（a图），虽然可以设置背景图片  ，但是自带的  < > 却始终去不掉，再经过多次的尝试之后，给他的箭头颜色设置为透明则解决。

.swiper-button-prev, .swiper-button-next{
  color: transparent !important;
}

 （a图）

                         （b图）

 2. 点击大轮播图时  实现图片大图展示效果

这里参考文档：    vue-awesome-swiper 中 点击事件无效处理方案 - 程序员大本营

完整代码

<template>
  <div class="firstDiv">
    <div class="swiper-button-prev left" slot="button-next"></div>
    <div class="swiper-button-next right" slot="button-next"></div>

    <div class="centerDiv">
      <div class="lunbokuangDiv">
        <div class="lunboDiv">
          <div class="thumb-example">
            <!-- 大轮播图 -->
            <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
              <swiper-slide v-for="(item,index) in imglist" :key="index">
                <img :src="item.imgUrl"></img>
              </swiper-slide>
            </swiper>
            <!-- 小缩略图 -->
            <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
              <swiper-slide class="slide-sv" v-for="(item,index) in imglist" :key="index">
                <img :src="item.imgUrl" class="svimg"></img>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>

    <div class="bigImg" v-show="bigImgShow" @click="closeBigImg()">
      <img :src="bigImgSrc" width="100%" height="100%">
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

let vm = null;

export default {
  name: 'lunboimage',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      imglist:[
          {imgUrl: '../../../../static/img/g1.jpg'},
          {imgUrl: '../../../../static/img/g2.jpg'},
          {imgUrl: '../../../../static/img/g3.jpg'},
          {imgUrl: '../../../../static/img/g4.jpg'},
          {imgUrl: '../../../../static/img/g5.jpg'},
          {imgUrl: '../../../../static/img/g6.jpg'},
          {imgUrl: '../../../../static/img/g7.jpg'}
          ],
      bigImgShow: false,
      bigImgSrc:'',
      swiperOptionTop: {
        loop: true,
        on: {
          click: function () {
            // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            // console.log(this); // -> Swiper
            // 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将 复制的块 的数量计算在内。
            const realIndex = this.realIndex;
            vm.handleClickSlide(realIndex);
          }
        },
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    }
  },
  methods:{
    handleClickSlide(index) {
      //console.log('当前点击索引：', index);
      this.bigImgSrc = this.imglist[index].imgUrl;
      this.bigImgShow = true;
    },
    closeBigImg(){
      this.bigImgSrc = '';
      this.bigImgShow = false;
    }

  },
  created() {
    vm = this;
  },
  mounted () {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      //console.log(this.$refs)
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
}
</script>

<style scoped>

.swiper-button-prev, .swiper-button-next{
  color: transparent !important;
}

.firstDiv{
  position: relative;
}

.centerDiv{
  position: absolute;
  width: 1555px;
  height: 889px;
  left:321px;
  top:175px;
  background-image: url('../../../../static/img/bigkuang.png');
}

.lunbokuangDiv{
  position: absolute;
  width: 952px;
  height: 551px;
  left:287px;
  top: 75px;
  background-image: url('../../../../static/img/lunbokuang.png');
  background-repeat: no-repeat;
}

.lunboDiv{
  position: absolute;
  width: 832px;
  height: 468px;
  left:59px;
  top: 42px;
}

.left{
  position:absolute;
  width:60px;
  height:70px;
  left: 435px;
  top: 455px;
  background-image: url('../../../../static/img/leftButton.png');
  background-repeat: no-repeat;
}

.right{
  position:absolute;
  width:60px;
  height:70px;
  left: 1681px;
  top: 455px;
  background-image: url('../../../../static/img/rightButton.png');
  background-repeat: no-repeat;
}

.bigImg{
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  z-index: 99;
}

.thumb-example {
  height: 650px;
  background-color: transparent;
}

 .swiper-slide {
  background-size: cover;
  background-position: center;
}

 .swiper-slide img{
   width: 100%;
   height: 100%;
 }

.gallery-top {
   height: 72%;
   width: 100%;
 }
.gallery-thumbs {
  position: absolute;
  left: -100px;
  margin-top: 100px;
  height: 27%;
  width: 128%;
  box-sizing: border-box;
  padding: 10px 0;
 }
.gallery-thumbs .swiper-slide {
   width: 20%;
   height: 100%;
   opacity: 0.3;
 }
.gallery-thumbs .swiper-slide-active {
   opacity: 1;
 }

.slide-sv{
  position: relative;
  background-image: url("../../../../static/img/svkuang.png");
}

.svimg{
  position: absolute;
  top: 12px;
  left: 21px;
  width: 80% !important;
  height: 80% !important;
}

</style>

效果：

                                                        春景则雾锁烟笼，长烟引素，水如蓝染，山色渐青