vue-awesome-swiper的使用

1.安装
建议使用淘宝镜像，使用npm安装容易卡顿出错。

cnpm install vue-awesome-swiper@2.6.7 --save

2.在main.js中添加

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

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

3.轮播图组件

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-image" :src="item.imgUrl" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    data () {
        return {
            swiperOption: {
                pagination: '.swiper-pagination', // 点
                loop: true //开启循环轮播
            },
            swiperList: [{
                id: '0001',
                imgUrl: 'https://s10.mogucdn.com/mlcdn/c45406/190909_39ebb23kl541d368jj5eb1eadge05_1125x390.jpg'
            }, {
                id: '0002',
                imgUrl: 'https://s10.mogucdn.com/mlcdn/c45406/190909_7c5d93c9gkejj24ihlhibih16bkf9_1125x390.jpg'
            }]
        }
    }
}
</script>

<style lang="scss" scoped>
// 样式穿透：让.wrapper中所有的XX子组件样式都变为白色
.wrapper >>> .swiper-pagination-bullet-active{
    background:#fff !important;
}
.wrapper{
    //为防止图片加载完才撑开高度，设置宽度100%，高度会相对与款冬自动撑开34.66%
    padding-bottom:34.66%;
    width:100%;
    height:0;
    overflow: hidden;
    background:#eee;
    .swiper-image{
        width:100%;
    }
}
    
</style>