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

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

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>

实现效果

三行两列

相关推荐
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css