<template>
<div class="tabs">
<swiper :options="swiperOption">
<!-- slides -->
<!--注意这里必须要有:key否则,报错-->
<!--原因:https://blog.csdn.net/qq_43540219/article/details/107615142-->
<swiper-slide v-for="item in tabsList" :key="item.id">
<div >
<!--注意这里src要改成:src-->
<img :src='item.imgUrl' >
<p>{{item.title}}</p>
</div>
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<style scoped>
.tabs {
padding: .3rem 0;
}
</style>
<script>
export default {
data() {
return {
swiperOption: {
//更多的选项去swiper官网看,这里不是重点
slidesPerView: 4.5//显示4.5个
},
tabsList: [
{
id: 0,
imgUrl: "/img/tabs1.gif",
title: "签证"
},
{
id: 1,
imgUrl: "/img/tabs2.png",
title: "游侠集市"
},
{
id: 2,
imgUrl: "/img/tabs3.png",
title: "分享会"
},
{
id: 3,
imgUrl: "/img/tabs4.gif",
title: "别young之旅"
},
{
id: 4,
imgUrl: "/img/tabs5.gif",
title: "瑜伽行"
},
{
id: 5,
imgUrl: "/img/tabs6.png",
title: "旅拍"
},
{
id: 6,
imgUrl: "/img/tabs7.png",
title: "视频"
},
{
id: 7,
imgUrl: "/img/tabs8.png",
title: "游记"
},
{
id: 8,
imgUrl: "/img/tabs9.png",
title: "目的地"
},
{
id: 9,
imgUrl: "/img/tabs10.png",
title: "圈子"
}
],
}
}
}
</script>
用v-for配合swiper渲染图片
猜你喜欢
转载自blog.csdn.net/qq_43540219/article/details/107616095
今日推荐
周排行