前段時間項目上需要加個首頁資源位，是banner輪播的形式，需求要的比較急，給了一天左右的開發(fā)周期，準備用vue的輪播插件去完成這個需求

在github上找了一些適用于vue的輪播插件，做了幾個小的demo，對比了一下，從MIT，體積，流暢度，api支持等角度選出了一款插件
vue-awesome-swiper，有類似需求的小伙伴們可以去github上看看。

安裝和引入的過程就不貼了，小伙伴們可以自行去官網或者github上看。

極其簡單的流程.jpg

其實流程的話，特別簡單，重點就是api的使用和可能會踩得坑需要注意下

隱藏的坑：

1. slide的事件（如點擊）

既然是資源位的話，點擊相應的banner圖肯定是會跳轉到相應的路徑或者schema的，vue-awesome-swiper是基于swiper4封裝的vue插件，所以事件的話還是用on監(jiān)聽回調的，不建議用@click來寫點擊事件，開啟loop模式后點擊是會失效的

data() {
    return {
      showBanner: false,
      adcode: '',
      swiperOption: {
        loop: true,
        resistanceRatio: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        on: {
          tap() {
            const { realIndex } = this;
            vm.handleClickSlide(realIndex);
          },
        },
      },
      bannerList: [],
    };
  },

配置項放在swiperOption里面的，在on中寫上tap的回調，可以實現slide的點擊回調，使用click的話在移動端是有延遲感的

2.this的指向問題

細心的小伙伴應該在上面代碼看出來了，on里面使用的是vm調用的methods里定義的方法，不能使用this，在這里的this是swiper對象,需要在外部定義vm，然后在created中給vm賦值this

<script>
let vm = null;
export default {
  data() {
    return {}
  },
  created() {
    vm = this;
  },

3. loop設置為true不生效的問題

這個問題的話，如果你的數據是異步數據的話是會遇到這個問題的，在swiperOption中設置loop為true的話，不生效，在你的數據沒有準備好之前的話最好不要渲染你的swiper的，某些配置項是會失效的

   <swiper v-if="bannerList.length > 0" class="wrapper" :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-item" v-for="(item,index) in bannerList" :key="index">
        <img class="swiper-img" :src="item.banner_url" alt>
      </swiper-slide>
      <div class="swiper-pagination" v-if="bannerList.length > 1" slot="pagination"></div>
   </swiper>

解決這個問題的方法就是使用v-if來決定你的swiper的渲染時機，當然了同理你也可以控制你的pagination分液器導航的顯示，我做的是一張圖片不顯示分頁器導航

4. 改變分頁器的樣式

這個的話參考swiper4的配置，并沒有生效，js自定義樣式的話在script里面代碼有點多，所以我想著直接修改類名的樣式，發(fā)現并不能直接修改具有scoped的css樣式，穿透走起

.wrapper >>> .swiper-pagination-bullet-active {
  background: #ffffff;
}

效果一試，可以改變分頁器的樣式

項目還在測試階段，就不放最終效果了，輪播的體驗還是不錯的，有需要的小伙伴可以用一用，API還是很豐富的，喜歡或者覺得不錯的小伙伴不要吝嗇你們的贊噢······