vue-awesome-swiper縮略圖控制循環(huán)無效解決方案

在使用vue-awesome-swiper當(dāng)中的Thumbs Gallery With Two-Way Control Loop （ 縮略圖控制循環(huán) ）
時(shí)谱轨，官方示例的代碼并不好用，不是出現(xiàn)bug就是縮略圖只能居中，不能從左下角對(duì)齊

官方demo

<template>
  <md-card>
...
    </md-card-actions>
    <md-card-media  style="height: 500px">
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
        <swiper-slide class="slide-1"></swiper-slide>
        <swiper-slide class="slide-2"></swiper-slide>
        <swiper-slide class="slide-3"></swiper-slide>
        <swiper-slide class="slide-4"></swiper-slide>
        <swiper-slide class="slide-5"></swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide class="slide-1"></swiper-slide>
        <swiper-slide class="slide-2"></swiper-slide>
        <swiper-slide class="slide-3"></swiper-slide>
        <swiper-slide class="slide-4"></swiper-slide>
        <swiper-slide class="slide-5"></swiper-slide>
      </swiper>
    </md-card-media>
  </md-card>
</template>


<script>
  export default {
    data() {
      return {
        swiperOptionTop: {
          spaceBetween: 10,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        swiperOptionThumbs: {
          spaceBetween: 10,
          slidesPerView: 4,
          touchRatio: 0.2,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          slideToClickedSlide: true,
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
    }
  }
</script>
<style lang="scss" scoped>
...
</style>

遇到無限輪播無效問題

原因是沒有對(duì)圖片數(shù)據(jù)進(jìn)行校驗(yàn)判斷。

解決方法

<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" v-if="dataList.length > 0">
      <swiper-slide v-for="(item,index) in dataList">
        <img v-img:group class="comp-intro-banner"
             :src="item.imgUrl" alt="item.title">
      </swiper-slide>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>

這次圖片可以輪播了彭沼。但是top和thumbs在變化時(shí)又出現(xiàn)了不同步的問題。

top和thumbs在變化時(shí)又出現(xiàn)了不同步的問題滓走。

此時(shí)會(huì)在控制臺(tái)報(bào)錯(cuò)找不到Controller权薯，找不到swiper。

原因是mounted中找不到$ref.swiperTop.swiper

vue官網(wǎng)是這樣說的

當(dāng) v-for 用于元素或組件的時(shí)候撩鹿，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組谦炬。
關(guān)于 ref 注冊(cè)時(shí)間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在节沦！$refs 也不是響應(yīng)式的键思，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

解決方法
updated替換mounted甫贯，但是這樣每一次DOM結(jié)構(gòu)更新吼鳞，vue都會(huì)調(diào)用一次updated(){}鉤子函數(shù)，而我們只需要在swiper初始化的時(shí)候進(jìn)行調(diào)用叫搁。

updated () {
    if (this.isInit === 1) {
      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
      })
      this.isInit = 0
    }
  },