如何实现多排数据滚动效果
swiper 外部容器
swiper-item 每一页的数据
因为现在有多排数据,现在在swiper-item 中需要循环一个数组
初版
js
<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布局
js
//swiper-item 组件
.item {
display: flex;
// 允许项目换行
flex-wrap: wrap;
// 多行项目在交叉轴上的对齐方式
align-content: flex-start;
justify-content: space-evenly;
align-items: flex-start;
}
js
<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>实现效果
三行两列
