在vue工程中使用vue-awesome-swiper實現輪播圖

自己做的小項目中，需要使用輪播圖。選擇了網上推薦的vue-awesome-swiper。這裏講一下，如何在vue工程中，安裝及使用vue-awesome-swiper。後續如有更加複雜的應用，會繼續補充。

這裏實現的功能就是，應用在移動端，自動輪播，可以顯示原點式的提示，展示顯示到了第幾章輪播。

首先，貼出非常有用的官方網址。

vue-awesome-swiper:https://www.swiper.com.cn/

在vue中的使用：https://github.com/surmon-china/vue-awesome-swiper

帶分頁的官方示例：https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/03-pagination.vue

下面是我各人的使用步驟：

第一步，安裝

npm install vue-awesome-swiper --save

第二步，在全局中引用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

第三步，創建一個組件，這個組件就是你即將要使用的vue-awesome-swiper.這裏把我的代碼全貼上

<template>
    <swiper class="container" :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
            <img :src="slide" alt="">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    
</template>

<script>
// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    name:'FlowerSlide',
    components: {
        swiper,
        swiperSlide,
    },
    props:{
        swiperSlides:{
            type:Array,
            // default:()=>{
            //     return [require('../assets/images/crose1.jpg'),require('../assets/images/crose2.jpg'),require('../assets/images/crose3.jpg'),require('../assets/images/crose4.jpg'),require('../assets/images/crose5.jpg')]
            // }
        }

    },
    data:function(){
        return{
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                },
                autoplay:true
            }         
            
        }
    },    

}
</script>
<style lang="scss" scoped>
  @function calcSize($val,$baseDesignWidth:375){
    @return ($val/$baseDesignWidth) * 1rem;

  }
/*************************************************/
  .container{
      img{
          width:100%;
          height:calcSize(200)
      }
    
  }


</style>

注意這裏和輪播圖相關的部分，html部分就是<swiper></swiper>那些，大家可以參考官網，或者我這個，根據自己的情況，基本不需要調整。我是加載父組件傳過來的數據，所以使用了v-for循環。傳過來的數據用 props中的swiperSlides接住。此外，以下這兩句，不要忘記加上去。

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

以上就是關於輪播的核心部分，基本上所有的代碼都在此。最後，哪裏需要使用你封裝的這個輪播組件，哪裏調用即可。我封裝的這個組件叫做FlowerSlide（見上代碼），所以我在其它地方，就像調用普通的組件一樣調用它即可。