欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > 小程序多排数据横向滚动实现

小程序多排数据横向滚动实现

2025/9/21 4:33:45 来源:https://blog.csdn.net/qq_73270720/article/details/140634253  浏览:    关键词:小程序多排数据横向滚动实现

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

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>

实现效果

三行两列

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词