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

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

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>

实现效果

三行两列

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript