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

 //照片墙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是拿到的数组

//轮播效果
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;
},
},

最后

以上就是执着自行车最近收集整理的关于关于照片墙轮播（指定个数）的全部内容，更多相关关于照片墙轮播（指定个数）内容请搜索靠谱客的其他文章。