Vue中使用vue-awesome-swiper實現移動端的輪播

swiper,一款不錯的輪播插件，支持移動端   官網api網址： http://www.swiper.com.cn/api/index.html

在vue中使用swiper, 有專門的一個npm包： vue-awesome-swiper

 

使用步驟：

1.安裝vue版swiper

cnpm i -S vue-awesome-swiper

 

2. 在.vue組件中引入swiper , swiperSlide  和 css樣式

import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' //注意這里  

 

3.編寫布局和樣式

<div class="swiper-box">
        <swiper class="box-container" :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, index) in imgLists" :key="index" @touchmove.native="stopPlay" @touchend.native="play">  // 自定義組件要加上.native
                <img class="swiper-image" :src="item.url" alt="">
            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>
    </div>

.swiper-image{
  width: 100%;
  height: 270px;
}

 

4.在data里配置imgLists圖片地址和配置swiperOption參數

imgLists: [
        {
          url: "/src/static/img1.jpg"
        },
        {
          url: "/src/static/img2.jpg"
        },
        {
          url: "/src/static/img3.jpg"
        },
        {
          url: "/src/static/img4.jpg"
        }
      ],
      swiperOption: {
        notNextTick: true,
        autoplay: {    // 自動播放
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true,   // 循環
        directionType: "horizontal", // 方向
        pagination: {               // 分頁器
          el: '.swiper-pagination',
          type: "bullets",
          clickable :true
        },
        navigation: {   // 左右按鈕
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer:true,  // 啟動動態檢查器(OB/觀眾/觀看者)，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。
        observeParents: true,  // 將observe應用於Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新。
        setWrapperSize :true  // Swiper使用flexbox布局(display: flex)，
        // 開啟這個設定會在Wrapper上添加等於slides相加的寬或高，在對flexbox布局的支持不是很好的瀏覽器中可能需要用到。
      }

5. 在computed中

computed: {
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },

6.在methods中，

    stopPlay() {
      this.mySwiper.autoplay.stop();    // 當手指觸摸時停止自動播放 3     },
    play() {
      this.mySwiper.autoplay.start();   // 當手指離開時開始自動播放 6     }