H5轮播图Vue-cli3使用vue-awesome-swiper缩略图靠左对齐

需求：H5活动带缩略图的轮播，canvas将底图与元素图合成一张，缩略图左对齐，滑动缩略图时大图不联动。

问题：vue-awesome-swiper官方文档带缩略图的示例，上下联动且缩略图居中对齐，当设置参数centeredSlides: true左对齐了，但8张缩略图，第5张开始不能点击。

方案：将vue-awesome-swiper官方分页器示例改成缩略图样式的。

效果：

效果图

demo：demo效果网页

备注：使用了postcss-px2rem将px转成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' // 去掉标签的默认样式
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, // 当前轮播的图
      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: {
    // 当前模板索引
    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 样式，我是将分页器样式覆盖改成缩略图的
::-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>