vue移動端引入swiper

最終效果：

注：vue 版本：2.5.2

       vue-awesome-swiper 版本：3.1.3 ，如果需要使用swiper 不需單獨引入

1. 引入 vue-awesome-swiper 

npm install [email protected] --save-dev

2. 頁面使用

<swiper ref="mySwiper1" :options="swiperOption">
    <swiper-slide>
        <a href="javascript:;">
            <img class="img" src="@/assets/images/card.jpg" alt="商品圖">
        </a>
    </swiper-slide>
    <swiper-slide>
        <a href="javascript:;">
            <img class="img" src="@/assets/images/card2.png" alt="商品圖">
        </a>
    </swiper-slide>
    <swiper-slide>
        <a href="javascript:;">
            <img class="img" src="@/assets/images/card.jpg" alt="商品圖">
        </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-scrollbar"></div>
</swiper>

3. 組件中引入

<script>
    import Vue from "vue";
    import VueAwesomeSwiper from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    Vue.use(VueAwesomeSwiper);

    data(){
        return {
            swiperOption:{
                loop:true, // 循環輪播
                autoplay:true, // 自動播放  也可設置自動輪播時間，比如：3000
                pagination:{ // 分頁器
                    el:".swiper-pagination"
                }
            }
        }
    },
    computed:{
        swiper(){
            return this.$refs.mySwiper1.swiper
        }
    }

</script>

4. 同時引入css

<style lang="scss">
.img{
    width:600px;
    height: 380px;
    border-radius: 15px;
}
.swiper-container{
    height: 450px;
    .swiper-pagination-bullet{
        background-color: #888888;
        width:16px;
        height: 2px;
        border-radius: 3px;
        opacity: 1 !important;
        bottom: -10px;
    }
    .swiper-pagination-bullet-active{
        background-color: #fff;
        width:16px;
        height: 2px;
        border-radius: 3px;
    }
}