<template>
<div class='recommend'>
<swiper :options="swiperOption">
<swiper-slide v-for="(slid, index) in data" :key="index">
<img :src="slid" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script >
export default{
data() {
return {
data:[],
ok:false,
swiperOption:{
autoplay:{
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop : true,
pagination: {
el: '.swiper-pagination'
}
}
}
},
mounted(){
this.$axios.get("http://www.xxxx.php")
.then(res=>{
return res.data
})
.then(data=>{
this.data=data.chengpinDetails[0].img})
.catch(error=>{
console.log(error)
})
}
}
</script>
按照GitHub上vue-awesome-swiper的文档使用,发现loop功能无效,修改如下
<template>
<div class='recommend'>
<swiper :options="swiperOption"
v-if='ok'>
<swiper-slide><img :src="data[0]" alt=""></swiper-slide>
<swiper-slide><img :src="data[1]" alt=""></swiper-slide>
<swiper-slide><img :src="data[2]" alt=""></swiper-slide>
<swiper-slide><img :src="data[3]" alt=""></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script >
export default{
data() {
return {
data:[],
ok:false,
swiperOption:{
autoplay:{
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop : true,
pagination: {
el: '.swiper-pagination'
}
}
}
},
mounted(){
this.$axios.get("http://www.xxx.php")
.then(res=>{
return res.data
})
.then(data=>{
if(!data){return}
this.ok=true
this.data=data.chengpinDetails[0].img})
.catch(error=>{
console.log(error)
})
}
}
</script>
备注:如果不用v-if进行条件渲染,在下次循环时会出现一页空白,然后直接跳转到下一页.本例子有4条数据.