一篇教你多排轮播效果

多排轮播

提示：demo案例

效果看看把

这些都是可以单独左右滑动的

---

前言

今天想着想着 看着别人这样 哎还挺好看，就自己弄了

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、上才艺

<view style="margin: 1rem auto; width: 100%; background-color: #2F4EAB; padding: 10px;"><view v-for="(row, rowIndex) in paginatedWorks" :key="rowIndex" style="margin-bottom: 10px;"><swiper :autoplay="true" interval="3000" circular="true":previous-margin="rowIndex % 2 === 0 ? '0px' : '15px'" :display-multiple-items="3":next-margin="rowIndex % 2 === 0 ? '0px' : '15px'" style="width: 100%; height: 4rem;"><swiper-item v-for="(item, index) in row" :key="index"><view style="display: flex; justify-content: space-between; padding: 5px;"><viewstyle="display: flex; flex-direction: column; align-items: center; width: 90%;"><image :src="item.image" @click="onImageClick(item,index)"style="width: 100%; height: 3rem; border-radius: 4px; overflow: hidden;"mode="aspectFit" /></view></view></swiper-item></swiper></view></view>

js 代码 这些是自己的数据
// 第一排内容是数组的前 4 项。
// 第二排内容是数组的第 5 至 8 项。
// 第三排内容是数组的第 9 至 12 项。

designerWorks: [{image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'},{image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'},{image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'},{image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'},{image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'},{image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'},{image: 'https://dm-ass-cn-guangzhou.aliyuncs.com/0/5.jpg'},{image: 'https://dm-ss-cn-guangzhou.aliyuncs.com/0/2.jpg'},{image: 'https://dm-.oss-cn-guangzhou.aliyuncs.com/0/3.jpg'},{image: 'https://dmss-cn-guangzhou.aliyuncs.com/0/4.jpg'},{image: 'https://dm-.oss-cn-guangzhou.aliyuncs.com/0/1.jpg'},{image: 'https://dm-.oss-cn-guangzhou.aliyuncs.com/0/1.jpg'},{image: 'https://dm-oss-cn-guangzhou.aliyuncs.com/0/1.jpg'},],paginatedWorks: [], // 存储分页后的作品数据//这个是方法 在页面加载的时候调用下面这个方法即可paginateWorks() {// 第一排内容是数组的前 4 项。// 第二排内容是数组的第 5 至 8 项。// 第三排内容是数组的第 9 至 12 项。const itemsPerRow = 4; // 每行展示 3 个项目const maxRows = 3; // 限制最多显示 4 行const rows = [];for (let i = 0; i < this.designerWorks.length && rows.length < maxRows; i += itemsPerRow) {rows.push(this.designerWorks.slice(i, i + itemsPerRow));}this.paginatedWorks = rows; // 存储分组后的数据console.log('分页后的数据:', this.paginatedWorks);},

---

总结

感觉超级不错哎 效果嘎嘎的 ，我这才艺
个人小程序：