- 引入swiper
index.html
<link rel="stylesheet" href="static/lib/swiper-3.4.2.min.css">
<script type="text/javascript" src="static/lib/swiper-3.4.2.jquery.min.js"></script>
- 编写html界面
<!--轮播图-->
<div class="swiper-container">
<div class="swiper-wrapper"><!-- @click="product_introduction" -->
<div class="swiper-slide" v-for="item in advInfo"><img :src="item.image" alt=""/></div>
</div>
<div class="swiper-pagination"></div>
</div>
- swiper配置
methods: {
initSwiper () {
var banner = new Swiper(".swiper-container",{
direction:"horizontal",//设置滚动方向
autoplay:2000,//设置切换间隔事件
loop: true, // 循环模式选项
pagination:".swiper-pagination",//设置分页器的class名
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
paginationClickable:true,//设置分页器是否可以点击
})
},
},
// 获取轮播图数据
created(){
this.$http.get(local_hosts + "/banners/bannerList",{
params:{
}
}).then(function(res){
this.advInfo = res.data.data.currentUser;
// for(var f = 0;f < this.advInfo.length;f++){
// this.jumpPage = this.advInfo[f].jumpPage;
// }
this.$nextTick(() => {
this.initSwiper()
})
},function (err) {
console.log(err)
})
},
注意:如果swiper的数据是动态获取的,必须要在网络请求返回后加
this.$nextTick(() => {
this.initSwiper()
})