el-carousel 改造之模块翻页效果

一个盒子的 list 有 50 个元素一排只能放 10 个元素类似于 el-carousel 的翻页效果。templatedivclasscontainerel-carousel:interval5000arrowalwaysheight200pxindicator-positionoutside!-- Each page is a group, with 10 elements per group --el-carousel-itemv-for(page, index) in pages:keyindexdivclassgriddivv-foritem in page:keyitem.idclassgrid-item{{ item.name }}/div/div/el-carousel-item/el-carousel/div/templatescriptsetupimport{computed,ref}fromvue// Original data: 50 elementsconstlistref(Array.from({length:50},(_,i)({id:i1,name:Element${i1}})))// Group by 10 elements per pageconstpageSize10constpagescomputed((){constresult[]for(leti0;ilist.value.length;ipageSize){result.push(list.value.slice(i,ipageSize))}returnresult})/scriptstylescoped.el-carousel{width:100%;}.el-carousel__item{display:flex;align-items:stretch;padding:10px 0;}.grid{display:grid;grid-template-columns:repeat(10,1fr);/* 10 elements per row */gap:12px;width:100%;height:100%;}.grid-item{display:flex;align-items:center;justify-content:center;background:#f5f7fa;border-radius:8px;padding:12px;font-size:14px;color:#333;border:1px solid #e8e8e8;transition:all 0.3s;}.grid-item:hover{border-color:#1890ff;box-shadow:0 2px 8pxrgba(24,144,255,0.15);}/style示例divclasscarouselBoxel-carouselheight100%:autoplayfalserefcarouselRefwheel.preventhandleWheel!-- Each page is a group, with 10 elements per group --el-carousel-itemv-for(page, index) in pages:keyindexdivclassappAllBoxdivclassappItemBoxv-for(item,index) in page:keyindeximgsrc/assets/pcs/logo.pngaltpclass{{item.title}}/p/div/div/el-carousel-item/el-carousel/divscriptsetupimport{ref,onMounted,reactive,computed}fromvueconstcarouselRefref(null)conststatereactive({qzxData:[{title:平台1,url:,},{title:平台2,url:,},{title:平台3,url:,},{title:平台4,url:,},{title:平台5,url:,},{title:平台6,url:,},{title:平台7,url:,},{title:平台8,url:,},{title:平台9,url:,},{title:平台10,url:,},{title:平台11,url:,},],})// 按每页10个分组constpageSize10constpagescomputed((){constresult[]for(leti0;istate.qzxData.length;ipageSize){result.push(state.qzxData.slice(i,ipageSize))}returnresult})// 鼠标放到列表上支持滚动consthandleWheel(e){constcarouselcarouselRef.valueif(!carousel)return// deltaY 0 向下滚 → 下一页向上滚 →上一页if(e.deltaY0){carousel.next()}else{carousel.prev()}}/scriptstylelangscssscoped.carouselBox{width:100%;height:78%;.el-carousel{width:100%;height:100%;}.el-carousel__item{display:flex;align-items:stretch;}}.appAllBox{display:flex;flex-wrap:nowrap;width:100%;height:100%;overflow-x:auto;.appItemBox{display:flex;flex-direction:column;align-items:center;gap:8px;width:14%;img{width:50px;height:54px;}span{font-size:18px;}}}/style