需求：H5活動(dòng)帶縮略圖的輪播担映，canvas將底圖與元素圖合成一張嘱蛋，縮略圖左對(duì)齊，滑動(dòng)縮略圖時(shí)大圖不聯(lián)動(dòng)媒抠。

問(wèn)題：vue-awesome-swiper官方文檔帶縮略圖的示例昧甘，上下聯(lián)動(dòng)且縮略圖居中對(duì)齊户秤，當(dāng)設(shè)置參數(shù)centeredSlides: true左對(duì)齊了，但8張縮略圖，第5張開(kāi)始不能點(diǎn)擊际乘。

方案：將vue-awesome-swiper官方分頁(yè)器示例改成縮略圖樣式的。

效果：

效果圖

demo：demo效果網(wǎng)頁(yè)

備注：使用了postcss-px2rem將px轉(zhuǎn)成rem朋魔，使用配置可以上另一篇文章函荣。

1、安裝vue-awesome-swiper

yarn add vue-awesome-swiper // npm install vue-awesome-swiper

2浸踩、在main.js中引入

import Vue from 'vue'
import App from './App.vue'

import VueAwesomeSwiper from 'vue-awesome-swiper' // 引入vue-awesome-swiper
import './assets/css/reset.css' // 去掉標(biāo)簽的默認(rèn)樣式
import 'swiper/dist/css/swiper.css' // 引入swiper樣式
Vue.use(VueAwesomeSwiper /* { default global options } */) // 使用插件

new Vue({
  render: h => h(App)
}).$mount('#app')

3叔汁、Home.vue

<template>
  <div class="home">
    <div class="swiperWrap" v-if="recordsList.length > 0">
      <swiper :options="swiperOption" class="gallery-top" ref="swiperTop" @slideChangeTransitionEnd="setCurrIndex">
        <swiper-slide v-for="(item, index) in recordsList" :key="index">
          <div class="swiper-zoom-container">
            <img :src="item.backImageUrl" class="itemImg" :id="'backBg'+index"/>
            <img :src="item.coverImageUrl" class="itemImg" :id="'coverBg'+index"/>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="swiper-pagination swiper-pagination-bullets" ref="navList" id="navList" slot="pagination"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return{
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          spaceBetween: 10,
          clickable: true,
          renderBullet: (index, className) => {
            this.activeIndex = index
            // console.log('index:'+index)
            return `<span id=a${index} class="${className} swiper-pagination-bullet-custom">
            <img src="${this.recordsList[index].iconImageUrl}" class="iconImg" alt="0" />
            <em class="redPoint${index}"></em>
            </span>`
          }
        }
      },
      activeIndex: 0, // 當(dāng)前輪播的圖
      recordsList: [
        {
          "id": 1,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon4.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c1.png",
          "backImageUrl": "http://d.paper.i4.cn/max/2016/11/25/14/1480055792014_800031.jpeg",
        },
        {
          "id": 2,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon2.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c2.png",
          "backImageUrl": "http://img.creasy.365zhang.com/bg2.png",
        },
        {
          "id": 3,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon3.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c3.png",
          "backImageUrl": "http://img.creasy.365zhang.com/bg3.png",
        },
        {
          "id": 4,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon1.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c4.png",
          "backImageUrl": "http://img.creasy.365zhang.com/bg4.png",
        },
        {
          "id": 5,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon5.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c5.png",
          "backImageUrl": "http://img.creasy.365zhang.com/bg1.png",
        },
        {
          "id": 6,
          "iconImageUrl": "http://img.creasy.365zhang.com/icon6.png",
          "coverImageUrl": "http://img.creasy.365zhang.com/c6.png",
          "backImageUrl": "http://img.creasy.365zhang.com/bg2.png",
        }
      ]
    }
  },
  beforeMount() {
    let timer1 = setInterval(() => {
      let rootFontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10;
      document.getElementsByTagName("html")[0].style.fontSize = rootFontSize + "px";
      if (rootFontSize > 32) {
        clearInterval(timer1);
      }
    }, 60);
    let timer2 = setTimeout(() => {
      clearInterval(timer1);
      clearTimeout(timer2);
    }, 3000);
  },
  methods: {
    // 當(dāng)前模板索引
    setCurrIndex() {
      this.activeIndex = this.$refs.swiperTop.swiper.activeIndex;
    }
  }
}
</script>
<style lang="scss">
.home{
  background: #161616;
  height: 100%;
  padding-top: 128px;
  box-sizing: border-box;
}
.swiperWrap {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-bottom: 25px;
}
.gallery-top {
  width: 630px;
  height: 840px;
}
.swiper-slide{
  width: 630px!important;
}
.swiper-slide-active{
  width: 630px!important;
}
.swiper-zoom-container img {
  border-radius: 30px;
}
.itemImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 縮略圖 icon 樣式，我是將分頁(yè)器樣式覆蓋改成縮略圖的
::-webkit-scrollbar{width:0;height:0}
.swiper-pagination {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  padding: 16px 25px;
  overflow-x: scroll;
  white-space: nowrap;
  position: static!important;
  overflow-y: hidden;
}
.swiper-pagination-bullet {
  width: 148px!important;
  height: 148px!important;
  border-radius: 24px!important;
  background: #d0d0d0!important;
  padding: 6px;
  border: 4px solid transparent;
  box-sizing: border-box;
  opacity: 1!important;
  margin-right: 14px;
  position: relative;
  font-size: 0;
}
.swiper-pagination-bullet-active {
  background: #fff!important;
  border: 4px solid #5c46ff;
  box-sizing: border-box;
}
.swiper-pagination-bullet:focus {
  outline: none!important;
}
.swiper-pagination-bullet-active:focus {
  outline: none!important;
}
.swiper-pagination-bullet:active {
  outline: none!important;
}
.swiper-pagination-bullet-active:active {
  outline: none!important;
}
.iconImg{
  width: 128px;
  height: 128px;
  border-radius: 20px;
}
</style>