在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（见上代码），所以我在其它地方，就像调用普通的组件一样调用它即可。