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

 //照片墙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;
},
},

最后

以上就是执着自行车为你收集整理的关于照片墙轮播（指定个数）的全部内容，希望文章能够帮你解决关于照片墙轮播（指定个数）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。