swiper安裝：
npm install vue-awesome-swiper --save
引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
使用例子：
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="showSwiper">
<!-- slides -->
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt="">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
props: {
list: Array
},
data () {
return {
swiperOption: {
pagination: '.swiper-pagination',
autoplay: 3000,
loop: true
}
}
},
computed: {
showSwiper () {
return this.list.length
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25%
background: #eee
.swiper-img
width: 100%
</style>
輪播控制
當(dāng)不希望自動切換的時候
autoplay: false,
當(dāng)輪播到頭的時候，不希望接著循環(huán)播放
loop: false
具體詳細(xì)配置信息查看：http://www.swiper.com.cn
關(guān)于樣式
這里要注意掸屡，我們想覆蓋掉swiper-pagination-bullet-active原有的樣式脉让，但是樣式并不在當(dāng)前頁悼做，因為style設(shè)置了scoped的原因右莱，所以要用3個箭頭進行一個穿透祠墅，就不受scoped的限制了
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
