移動端輪播圖外掛，在使用iview圖形介面外掛中的carousel元件無法實現觸控滑動後，轉而使用vue-awesome-swiper外掛

1.npm安裝

npm i vue-awesome-swiper -S

• 我這裡安裝的是下面的這個版本

2.使用

• 全域性匯入：

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 樣式的話，我這裡有用到分頁器，就在全域性中引入了樣式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);

• 元件引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
  swiper,
  swiperSlide
},
 

• 在template中使用

<swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="banner.length!=0">
  <swiper-slide v-for="(item,index) in banner" :key="index" >
    <img :src="item.image" alt="" />
  </swiper-slide>
  <!-- 常見的小圓點 -->
  <div class="swiper-pagination"  v-for="(item,index) in banner" :key="index" slot="pagination" ></div>
</swiper>
<!-- 顯示數字 -->
<div class="number">{{imgIndex}}/{{detailimages.length}}</div>
 

• data中配置

data() {
    const that = this;
    return {
      imgIndex: 1,
      swiperOption: {
        //是一個元件自有屬性，如果notNextTick設定為true，元件則不會通過NextTick來例項化swiper，也就意味著你可以在第一時間獲取到swiper物件，假如你需要剛載入遍使用獲取swiper物件來做什麼事，那麼這個屬性一定要是true
        notNextTick: true,
        //迴圈
        loop: true,
        //設定初始化時slide的索引
        initialSlide: 0,
        //自動播放
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          /* 觸控滑動後是否繼續輪播 */
          disableOnInteraction: false
        },
        //滑動速度
        speed: 800,
        //滑動方向
        direction: "horizontal",
        //小手掌抓取滑動
        grabCursor: true,
        on: {
          //滑動之後回撥函式
          slideChangeTransitionStart: function() {
            /* realIndex為滾動到當前的slide索引值 */
            that.imgIndex= this.realIndex - 1;
          },
        },
        //分頁器設定
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      }
   };
},
 

3.遇見的問題

• 這個外掛，在圖片只有一張時，仍然會自動滾動

這裡很需要注意的一點就是，如果你直接設定autoplay為true的話，在你觸控滑動圖片後，他就不會再自動滾動了

/* 這裡我是在使用介面請求後，對返回的資料進行判斷 */
created() {
  this.$Request({
    url: '',
    method: 'get',
    success: res => {
      this.swiperOption.autoplay = res.result.data.length != 1 ? {
        delay: 1500,
        stopOnLastSlide: false,
        disableOnInteraction: false
        } : false;
     }
  })
}

• 在on裡面，監聽slideChangeTransitionStart方法時，在開始的時候，我用的是activeIndex來設定對應的索引值，這個的話，滑向下一張沒有發現問題，後面，自己試著滑向上一張圖片，就發現出現問題，這個值不對應了,使用realIndex

on: {
   slideChangeTransitionStart: function() {
      that.imgIndex = this.realIndex + 1;
   },
},

• 在swiper這個容器中，會出現滾動到最後一張圖片後就不自動滾動了，以及出現底邊的小圓點寫了後不顯示的問題

原因是因為this.commodity剛開始資料為[],後來賦值才有值，所以要先判斷this.commodity是否為空,這裡就在swiper這個容器中進行判斷，若資料長度為0，就不顯示這個容器

<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0"></swiper>

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）