1.首先通过npm安装vue-awesome-swiper,我在项目中用的是2.6.7版本
npm install vue-awesome-swiper@2.6.7 –save
-
在main.js中引入
import VueAwesomeSwiper from ‘vue-awesome-swiper’
import ‘swiper/dist/css/swiper.css’
Vue.use(VueAwesomeSwiper)
3.使用
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
<!-- slides -->
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl"/>
</swiper-slide>
<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: 2000,
loop:true,
paginationClickable: true,
observer:true,
observeParents: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>