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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

实现效果

目标是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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

实现效果

三行两列