使用vue-awesome-swiper筆記

地圖找房部分功能截圖，點擊地圖上的小區信息，彈出全部小區信息swiper滑道點擊小區的小區信息那，左右滑動swiper時，地圖上選中的小區也會跟着變。

下面代碼是關於封裝的基於swiper小區詳細信息的組件

html代碼：

　　

<div class="detail-slide" v-show="curIndex>-1">
    <swiper :options="swiperOption" class="swiper-box" ref="detailSwiper">
      <swiper-slide class="swiper-item" v-for="(item,index) in detailData" :key="index">
        <div class="detail-slide-title">{{item.residentialName}}</div>
        <a class="detail-slide-content" :href="item.url">
          <img :data-src="item.coverImg+'@672w_378h_1e_1c_30q'" alt=""  class="swiper-lazy" />
          <div class="detail-slide-baseinfo">
            <div class="detail-slide-price" v-if="item.averagePrice">
              <span class="price" >{{item.averagePrice}}</span>元/㎡
            </div>
            <div class="detail-slide-price" v-else>
              <span class="price" >待定</span> 元/㎡
            </div>
            <ul class="showlist__tag" v-if="item.houseSpecial&&item.houseSpecial.length>0">
              <li class="showlist__tag__item" v-for="(items,index2) in item.houseSpecial" :key="index2">{{items.value}}</li>
            </ul>
          </div>
        </a>
      </swiper-slide>
    </swiper>
  </div>

js：

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data () {
    return {
      swiperOption: {
        slidesPerView: 1.14,
        // slidesOffsetAfter: 50,
        // 很重要，默認是left。若是使用默認值時，最後一個永遠不會成爲選中狀態，除非設置slidesOffsetAfter值，將倒數第二個擠出可視區外，這種ui效果不太好。使用centeredSlides:true就不會出現那個問題且ui效果不錯
        centeredSlides: true,
        spaceBetween: 10,
        lazy: {
          loadPrevNext: true
        },
        loadOnTransitionStart: true,
        watchSlidesVisibility: true, //解決了swiper前面的一個不能提早加載的bug
        on: {
          slideChangeTransitionEnd: () => {
            if (this.$refs.detailSwiper.swiper) {
              if (this.$parent.housetype === 1) {
                let swiper = this.$refs.detailSwiper.swiper
                let i = swiper.activeIndex
                this.$parent.detailCur = i
                this.$parent.getDetailData(i, false)
              }
            }
          }
        }
      },
      type: 0
    }
  },
  computed: {
    swiper () {
      return this.$refs.detailSwiper.swiper
    }
  },
  props: {
    curIndex: Number,
    detailData: Array
  },
  watch: {
    curIndex () {
      if (this.$parent.housetype === 1) {
        this.swiper.slideTo(this.curIndex, 0, false)
      }
    },
    detailData: {
      handler () {
        if (this.$parent.housetype === 1) {
          setTimeout(() => {
            this.swiper.slideTo(this.curIndex, 0, false)
          }, 100)
        }
      },
      deep: true
    }
  },
  created () {
    this.type = this.$parent.housetype
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

一、一次請求的圖片太多，爲避免看到圖片效果等待時間過長，應設置懶加載。vue-awesome-swiper有內置的懶加載功能，詳情參考https://www.swiper.com.cn/api/lazy/213.html。

官網指出：當你設置了slidesPerView:'auto' 或者 slidesPerView > 1，還須要開啓watchSlidesVisibility。我最初沒開啓watchSlidesVisibility，致使swiper前面的一張圖片不能提早加載，用戶體驗很差。

二、在滑動到最後一張時，最後那張永遠都不能成爲active狀態。

　　解決辦法：

　　一、設置centeredSlides: true，設定爲true時，active slide會居中，而不是默認狀態下的居左。

　　二、設置slidesOffsetAfter值，將倒數第二個擠出可視區外