vue輪播圖插件之vue-awesome-swiper

移動端輪播圖插件，在使用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>

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

• 往期好文推薦：

  • webpack打包（有面試題）
  • 純css實現瀑布流（multi-column多列及flex佈局）
  • 畫三角形