首先下载vue-awesome-swiper
cnpm install vue-awesome-swiper --save
在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
html中
//绑定options定义轮播名字
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in list" :key="index" >
<div><img class='swiper-img' :src="item.picUrl"alt=""></div>
</swiper-slide>
//分页
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
script
data(){
return{
swiperOption: {
autoplay: {
delay: 1000
},
pagination: {
el: '.swiper-pagination',
clickable: true //允许分页点击跳转
},
},
}
},
