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

news2024/9/24 13:13:37

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

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>

实现效果

目标是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;
}

<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>

实现效果

三行两列

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1944146.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ubuntu 22.04 安装部署gitlab详细过程

ubuntu 22.04 安装部署gitlab详细过程

目录 gitlab介绍 gitlab安装 步骤1&#xff1a;更新系统 步骤2&#xff1a;添加 GitLab 的 GPG 密钥 gitlab企业版 gitlab社区版 步骤3&#xff1a;安装 GitLab 社区版 社区版 步骤4&#xff1a;初始化 GitLab 步骤5&#xff1a;访问 GitLab 步骤6&#xff1a;查看r…
阅读更多...
mybatis中的缓存（一级缓存、二级缓存）

mybatis中的缓存（一级缓存、二级缓存）

文章目录 前言一、MyBatis 缓存概述二、一级缓存1_初识一级缓存2_一级缓存命中原则1_StatementId相同2_查询参数相同3_分页参数相同4_sql 语句5_环境 3_一级缓存的生命周期1_缓存的产生2_缓存的销毁3_网传的一些谣言 4_一级缓存核心源码5_总结 三、二级缓存1_开启二级缓存2_二级…
阅读更多...
# OpenCV 图像预处理—形态学：膨胀、腐蚀、开运算、闭运算 原理详解

# OpenCV 图像预处理—形态学：膨胀、腐蚀、开运算、闭运算 原理详解

文章目录 形态学概念膨胀使用膨胀操作来修复裂痕示例代码关键解析&#xff1a; 腐蚀使用腐蚀操作消除噪点示例代码&#xff1a; 开运算—先腐蚀后膨胀闭运算—先膨胀后腐蚀 形态学概念 首先看这两张图片 一张图周围有大大小小的噪音和彩点&#xff0c;另一张图片中字母有间隙&…
阅读更多...
安宝特方案｜解放双手，解决死角，AR带来质量监督新体验

安宝特方案｜解放双手，解决死角，AR带来质量监督新体验

AR质量监督 解放双手&#xff0c;解决死角 在当今制造业快速发展的背景下&#xff0c;质量监督成为确保产品高质量和完善的管理制度的关键环节。然而&#xff0c;传统的质量监督方式存在诸多挑战&#xff0c;如人工操作带来的效率低下、查岗不及时、摄像头死角等问题。 为了解…
阅读更多...
el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除

el-upload照片墙自定义上传多张图片（手动一次性上传多张图片）包含图片回显，删除

需求&#xff1a;el-upload照片墙自定义上传多张图片&#xff08;手动一次性上传多张图片&#xff09;包含图片回显&#xff0c;删除&#xff0c;预览&#xff0c;在网上看了很多&#xff0c;都没有说怎么把数据转为file格式的&#xff0c;找了很久最终实现&#xff0c; 难点&a…
阅读更多...
Java之数组应用-选择排序-插入排序

Java之数组应用-选择排序-插入排序

已经完全掌握了冒泡排序和二分查找的同学&#xff0c;可以自己尝试学习选择、插入排序。不要求今天全部掌握&#xff0c;最近2-3天掌握即可&#xff01; 1 选择排序 选择排序(Selection Sort)的原理有点类似插入排序&#xff0c;也分已排序区间和未排序区间。但是选择排序每次…
阅读更多...
《峡谷小狐仙-多模态角色扮演游戏助手》复现流程

《峡谷小狐仙-多模态角色扮演游戏助手》复现流程

YongXie66/Honor-of-Kings_RolePlay: The Role Playing Project of Honor-of-Kings Based on LnternLM2。峡谷小狐仙--王者荣耀领域的角色扮演聊天机器人&#xff0c;结合多模态技术将英雄妲己的形象带入大模型中。 (github.com) https://github.com/chg0901/Honor_of_Kings…
阅读更多...
盘点2024年大家都在使用的AI智能写作工具

盘点2024年大家都在使用的AI智能写作工具

在科技发达的现在社会&#xff0c;AI已经悄悄的渗入我们生活的各种角落。不知道你有没有尝试过用ai智能写作来完成一些文章创作呢&#xff1f;这次我介绍几个可以提升效率的ai智能写作工具给你试试吧。 1.笔&#xff5c;灵AI写作 CSDN 传送门&#xff1a;https://ibiling.cn…
阅读更多...
Interesting bug caused by getattr

Interesting bug caused by getattr

题意&#xff1a;由 getattr 引起的有趣的 bug 问题背景&#xff1a; I try to train 8 CNN models with the same structures simultaneously. After training a model on a batch, I need to synchronize the weights of the feature extraction layers in other 7 models. …
阅读更多...
Vue3+Element Plus 实现table表格中input的验证

Vue3+Element Plus 实现table表格中input的验证

实现效果 html部分 <template><div class"table"><el-form ref"tableFormRef" :model"form"><el-table :data"form.detailList"><el-table-column type"selection" width"55" align&…
阅读更多...
初识c++（string和模拟实现string）

初识c++（string和模拟实现string）

一、标准库中的string类 string类的文档介绍&#xff1a;cplusplus.com/reference/string/string/?kwstring 1、auto和范围for auto&#xff1a; 在早期C/C中auto的含义是&#xff1a;使用auto修饰的变量&#xff0c;是具有自动存储器的局部变量&#xff0c;后来这个 不重…
阅读更多...
【北航主办丨本届SPIE独立出版丨已确认ISSN号】第三届智能机械与人机交互技术学术会议（IHCIT 2024，7月27）

【北航主办丨本届SPIE独立出版丨已确认ISSN号】第三届智能机械与人机交互技术学术会议（IHCIT 2024，7月27）

由北京航空航天大学指导&#xff0c;北京航空航天大学自动化科学与电气工程学院主办&#xff0c;AEIC学术交流中心承办的第三届智能机械与人机交互技术学术会议&#xff08;IHCIT 2024&#xff09;将定于2024年7月27日于中国杭州召开。 大会面向基础与前沿、学科与产业&#xf…
阅读更多...
初识c++：string类 （1）

初识c++：string类 （1）

目录 # 初识c&#xff1a;string类 1.为什么学习string类 2.标准库中的string类 2.1 string类的了解 2.2 auto和范围for 2.3 string类的常用接口说明 2.3.1string类对象的常见构造 2.3.2string类对象的容量操作 2.3.3string类对象的访问及遍历操作 2.3.4string类对象…
阅读更多...
DNS概述及DNS服务器的搭建（twelve day）

DNS概述及DNS服务器的搭建（twelve day）

回顾 关闭防火墙 systemctl stop firewalld 永久停止防火墙 systemctl disable firewalld 关闭selinux setenforce 0 永久关闭selinux安全架构 vim /etc/selinux/config 修改静态IP地址 vim /etc/sysconfig/network-scripts/ifcfg-ens160 #修改uuid的目的是为了保证网络的唯一…
阅读更多...
计算机的错误计算（四十）

计算机的错误计算（四十）

摘要 计算机的错误计算&#xff08;三十九&#xff09;阐明有时计算机将0算成非0&#xff0c;非0算成0&#xff1b;并且前面介绍的这些错误计算相对来说均是由软件完成。本节讨论手持式计算器对这些算式的计算效果。 例1. 用手持式计算器计算 与 . 我们用同一个计算器计算…
阅读更多...
机械学习—零基础学习日志（高数10——函数图形）

机械学习—零基础学习日志（高数10——函数图形）

零基础为了学人工智能&#xff0c;真的开始复习高数 函数图像&#xff0c;开始新的学习&#xff01;本次就多做一做题目&#xff01; 第一题&#xff1a; 这个解法是有点不太懂的了。以后再多研究一下。再出一道题目。 张宇老师&#xff0c;比较多提示了大家&#xff0c;一定…
阅读更多...
哪些工作可以年入几十万到2亿?

哪些工作可以年入几十万到2亿?

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 从今年起&#xff0c; 每个月都会有年入几十万到2亿的新闻案例出来&#xff0c;而且很多都是官方媒体发的&#xff0c;你们看看&#xff1a; 7月19日35岁小伙扛楼一年多存了40万 7月4日老板娘一天卖出200斤知了日入…
阅读更多...
Leetcode3217. 从链表中移除在数组中存在的节点

Leetcode3217. 从链表中移除在数组中存在的节点

Every day a Leetcode 题目来源&#xff1a;3217. 从链表中移除在数组中存在的节点 解法1&#xff1a;集合 链表遍历 代码&#xff1a; /** lc appleetcode.cn id3217 langcpp** [3217] 从链表中移除在数组中存在的节点*/// lc codestart /*** Definition for singly-link…
阅读更多...
docker--容器数据进行持久化存储的三种方式

docker--容器数据进行持久化存储的三种方式

文章目录 为什么Docker容器需要使用持久化存储1.什么是Docker容器&#xff1f;2.什么是持久化存储&#xff1f;3.为什么Docker容器需要持久化存储&#xff1f;4.Docker如何实现持久化存储&#xff1f;(1)、Docker卷(Volumes)简介适用环境:使用场景:使用案例: (2)、绑定挂载&…
阅读更多...
Python 实现PDF和TIFF图像之间的相互转换

Python 实现PDF和TIFF图像之间的相互转换

PDF是数据文档管理领域常用格式之一&#xff0c;主要用于存储和共享包含文本、图像、表格、链接等的复杂文档。而TIFF&#xff08;Tagged Image File Format&#xff09;常见于图像处理领域&#xff0c;主要用于高质量的图像文件存储。 在实际应用中&#xff0c;我们可能有时需…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023