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

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

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>

实现效果

三行两列

相关推荐
颜漠笑年1 分钟前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
GIS之路2 分钟前
GeoTools 数据模型
前端
拾光拾趣录2 分钟前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
拾光拾趣录3 分钟前
浏览器存储:从Cookie到IndexedDB
前端·浏览器·indexeddb
拾光拾趣录3 分钟前
前端静态资源本地缓存:从秒开到省流量
前端·性能优化·浏览器
2301_805962931 小时前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero1 小时前
微信小程序121~130
微信小程序·小程序
難釋懷1 小时前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~1 小时前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
脑袋大大的1 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发