蔬菜基地做网站合适吗,wordpress增加备案,物流wap网站模板,在线网页代理app多排轮播 提示#xff1a;demo案例
效果看看把 这些都是可以单独左右滑动的 文章目录 多排轮播前言一、上才艺总结 前言
今天想着想着 看着别人这样 哎还挺好看#xff0c;就自己弄了 提示#xff1a;以下是本篇文章正文内容#xff0c;下面案例可供参考
一、上才艺
demo案例
效果看看把 这些都是可以单独左右滑动的 文章目录 多排轮播前言一、上才艺总结 前言
今天想着想着 看着别人这样 哎还挺好看就自己弄了 提示以下是本篇文章正文内容下面案例可供参考
一、上才艺
view stylemargin: 1rem auto; width: 100%; background-color: #2F4EAB; padding: 10px;view v-for(row, rowIndex) in paginatedWorks :keyrowIndex stylemargin-bottom: 10px;swiper :autoplaytrue interval3000 circulartrue:previous-marginrowIndex % 2 0 ? 0px : 15px :display-multiple-items3:next-marginrowIndex % 2 0 ? 0px : 15px stylewidth: 100%; height: 4rem;swiper-item v-for(item, index) in row :keyindexview styledisplay: flex; justify-content: space-between; padding: 5px;viewstyledisplay: flex; flex-direction: column; align-items: center; width: 90%;image :srcitem.image clickonImageClick(item,index)stylewidth: 100%; height: 3rem; border-radius: 4px; overflow: hidden;modeaspectFit //view/view/swiper-item/swiper/view/viewjs 代码 这些是自己的数据 // 第一排内容是数组的前 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);},总结
感觉超级不错哎 效果嘎嘎的 我这才艺 个人小程序
