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

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

官方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>

遇到無限輪播無效問題

原因是沒有對圖片數(shù)據進行校驗判斷。

解決方法

<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在變化時又出現(xiàn)了不同步的問題。

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

此時會在控制臺報錯找不到Controller，找不到swiper。

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

vue官網是這樣說的

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

解決方法
updated替換mounted，但是這樣每一次DOM結構更新，vue都會調用一次updated(){}鉤子函數(shù)，而我們只需要在swiper初始化的時候進行調用。

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
    }
  },