如何实现多排数据滚动效果

swiper 外部容器
swiper-item 每一页的数据
因为现在有多排数据,现在在swiper-item 中需要循环一个数组

初版

<template><view><view class="container"><view class="swiper-box"><swiper class="swiper" indicator-dots="true"><!-- 外层循环控制页数 --><swiper-item v-for="(el,index) in Math.ceil(listTop.length/6)" :key="index"><!-- 内层循环:控制每页个数 --><view class="swiper-item" v-for="(el2, index2) in listTop.slice(index*6,(index+1)*6)"><view class="text">{{ el2.text }}</view></view></swiper-item></swiper></view></view></view>
</template><script>export default {data() {return {listTop: [{//图标icon: '/static/index/组 57.png',//标题text: '新员工入职培训',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '专业力培训',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '管理能力培训',//箭头arrow: '/static/index/组 57.png'}, {//图标icon: '/static/index/组 57.png',//标题text: '客服序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '金鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '工程序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '雄鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '秩序序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '飞鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '环境序列',//箭头arrow: '/static/index/组 57.png'},],};}}
</script><style lang="scss" scoped>.container {width: 400rpx;height: 600rpx;margin: 0 auto;// 可视区域盒子大小.swiper-box {width: 400rpx;height: 500rpx;border: 2px solid black;// swiper组件.swiper {display: flex;height: 100%;// 每页的内容.swiper-item {display: flex;.text {color: pink;}}}}}
</style>

实现效果

目标是3排两列
一页6个
但是现在是一页6排1列
??如何变成两列

最终版

注意
swiper组件和swiper-item 有默认样式,会影响布局
主要采用flex布局

//swiper-item 组件.item {display: flex;// 允许项目换行flex-wrap: wrap;// 多行项目在交叉轴上的对齐方式align-content: flex-start;justify-content: space-evenly;align-items: flex-start;
}

<template><view><view class="container"><view class="swiper-box"><swiper class="swiper" indicator-dots="true"><!-- 外层循环控制页数 --><swiper-item class="item" v-for="(el,index) in Math.ceil(listTop.length/6)" :key="index"><!-- 内层循环:控制每页个数 --><view class="swiper-item" v-for="(el2, index2) in listTop.slice(index*6,(index+1)*6)"><view class="text">{{ el2.text }}</view></view></swiper-item></swiper></view></view></view>
</template><script>export default {data() {return {listTop: [{//图标icon: '/static/index/组 57.png',//标题text: '新员工入职培训',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '专业力培训',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '管理能力培训',//箭头arrow: '/static/index/组 57.png'}, {//图标icon: '/static/index/组 57.png',//标题text: '客服序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '金鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '工程序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '雄鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '秩序序列',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '飞鹰计划',//箭头arrow: '/static/index/组 57.png'},{//图标icon: '/static/index/组 57.png',//标题text: '环境序列',//箭头arrow: '/static/index/组 57.png'},],};}}
</script><style lang="scss" scoped>.container {width: 400rpx;height: 600rpx;margin: 0 auto;// 可视区域盒子大小.swiper-box {width: 400rpx;height: 500rpx;border: 2px solid black;// swiper组件.swiper {display: flex;height: 100%;//swiper-item 组件.item {display: flex;// 允许项目换行flex-wrap: wrap;// 多行项目在交叉轴上的对齐方式align-content: flex-start;justify-content: space-evenly;align-items: flex-start;// 每页的每一个内容.swiper-item {margin-top: 20rpx;width: 45%;border: 1px solid pink;height: 100rpx;line-height: 100rpx;text-align: center;.text {}}}}}}
</style>

实现效果

三行两列