关于照片墙轮播（指定个数）

89 阅读 0 评论 59 点赞

我是靠谱客的博主执着自行车，这篇文章主要介绍关于照片墙轮播（指定个数），现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 //照片墙template部分
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for="item in pages" :key="item.id">
<div v-for="page in item" :key="page.id" class="icons-item">
//ruoyi框架的图片预览
<image-preview :src="page.alumnusPhoto" class="icon-img" />
//文字部分
<h3 align="center" @click="toTest(page.alumnusId)">
{{ page.alumnusName }} {{ page.alumnusClass }}
</h3>
</div>
</swiper-slide>

//js部分

alumnusList是拿到的数组

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
//轮播效果
computed: {
pages() {
let pages = [];
this.alumnusList.forEach((item, index) => {
let idx = Math.floor(index / 6); //设置一页多少张照片
if (!pages[idx]) pages[idx] = [];
pages[idx].push(item);
console.log(pages);
});
return pages;
},
},