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

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

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.mzph.cn/news/874957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拍得更近、拍得更清:Pura 70 Pro如何做到5cm对焦?

众所周知&#xff0c;我们的眼睛离一个物品越近时&#xff0c;我们就越能看清该物品的细节&#xff0c;但物品距离超过某个极限时&#xff0c;反而会看不清楚——这是因为超出了眼睛所能对焦的极限。 对于手机摄像头来说&#xff0c;也具有相似的道理。当我们的手机镜头距离被…

windows server报错--无法启动此程序,因为计算机中丢失MSVCP120.dll解决办法(已解决)

无法启动此程序&#xff0c;因为计算机中丢失MSVCP120.dll解决办法。 win7系统丢失MSVCP120.dll解决方法&#xff1a; 1、安装微软常用运行库合集&#xff0c;就可以完美的解决&#xff0c;此C运行库算是很全了&#xff0c;安装它才免于重装系统&#xff0c;完美的解决了我的丢…

【elementui】记录el-table设置左、右列固定时,加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

当前elementui版本&#xff1a;2.8.2 现象&#xff1a;此处el-table__body-wrapper默认的滚动条宽度为8px&#xff0c;我加大到10px&#xff0c;如果不设置fixed一切正常&#xff0c;设置fixed后会被遮挡一点 el-table__fixed-right::before, .el-table__fixed::before 设置…

CentOS7使用Postfix, Dovecot搭建邮箱服务

CentOS7使用Postfix&#xff0c;Dovecot搭建邮箱服务的步骤与挑战&#xff1f; 为了满足企业内部或个人的邮件服务需求&#xff0c;使用CentOS7搭建一个稳定、安全的邮箱服务器是一个非常实用的解决方案。AokSend将详细介绍如何在CentOS7系统上使用Postfix和Dovecot搭建邮箱服…

linux系统进程占cpu 100%解决步骤

1.查找进程 ps aux 查看指定进程: ps aux | grep process_name2.根据进程查找对应的主进程 pstree -p | grep process_name 3.查看主进程目录并删除 ps -axu | grep process_name rm -rf /usr/bin/2cbbb

修改 Tomcat 默认端口号最简单的方法

前言 每次在创建一个新的Maven项目之后&#xff0c;启动项目总会报8080端口号被占用的问题&#xff0c;既然每次都有这样的困扰&#xff0c;那不如一了百了&#xff0c;直接修改默认的8080端口号。 &#xff08;如果还是想要默认端口号。可参考我主页文章杀死占用了8080的进程…

IB user verbs介绍

本文来自对内核源代码文档/Documentation/infiniband/user_verbs.rst的翻译和理解。 在Infiniband设备帮助下&#xff0c;跨计算机的两个进程可以相互访问对方的虚地址空间。在Linux操作系统上&#xff0c;支持进程能直接访问本地Infiniband设备的资源&#xff0c;从而实现跨机…

openmv学习笔记(24电赛笔记)

#opemv代码烧录清除详解 openmv的代码脱离IDE运行程序&#xff0c;只需要在IDE中将代码烧录道flash里面&#xff0c;断开IDE连接&#xff0c;上电之后&#xff0c;会自动执行main.py中的程序&#xff0c;IDE烧录的时候&#xff0c;会默认将程序后缀保存为 .py文件。 ​​​​​…

防爆智能手机如何助力电气行业保驾护航?

在电气行业的智能化转型浪潮中&#xff0c;防爆智能手机以其强大的数据处理能力、实时通讯功能及高度集成的安全特性&#xff0c;正成为保障电力网络稳定运行、预防安全隐患的得力助手。 防爆智能手机在电气行业中发挥着重要的保驾护航作用&#xff0c;主要体现在以下几个方面&…

swagger-ui.html报错404

问题1&#xff1a;权限受限无法访问 由于采用的Shiro安全框架&#xff0c;需要在配置类ShiroConfig下的Shiro 的过滤器链放行该页面&#xff1a;【添加&#xff1a;filterChainDefinitionMap.put("/swagger-ui.html", "anon");】 public ShiroFilterFact…

node+mysql实现(账户密码,阿里云短信验证,QQ邮箱注册登录,短信验证密码重置,邮箱密码重置)之注册,登录密码重置总篇

node+mysql实现账户登录 注意效果图项目插件代码参数说明短信验证模块邮箱验证模块注册方式登录方式密码重置前端页面部分登录页面账户登录页面(login.html)短信验证登录页面(smsLogin.html)邮箱登录页面(emailLogin.html)注册部分页面短信验证注册页面(register.html)邮…

【C++高阶】深度剖析:从零开始模拟实现 unordered 的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;哈希底层 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀哈希 &#x1f4d2;1. 改造 HashTable…

Qt多语言功能实现

本文介绍Qt多语言功能实现。 应用程序多语言支持是常用功能&#xff0c;比如产品需要出口到不同语种的国家。采用Qt的多语言支持工具可以方便实现应用程序的多语言功能。本文以中英文语言切换为例&#xff0c;简要介绍Qt的多语言功能实现。 1.界面设计 界面设计需要考虑使用…

正则表达式与文本三剑客之grep

目录 前言 一、grep命令 二、基础正则表达式常见元字符 2.1、特殊字符 2.2、定位符 2.3、非打印字符 三、元字符操作实例 3.1、查找特定字符 3.2、利用中括号“[]”来查找集合字符 3.3、查找行首“^”与行尾字符“$” 3.4、查找任意一个字符“.”与重复字符“*” 3.…

BGP选路之Preferred value

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由&#xff0c;然后将该最优BGP路由与去往同一目标网络的其他协议路由进行比较&#xff0c;从而决定是否将该最优…

OAuth2.0 or Spring Session or 单点登录流程

1.社交登录 2.微博社交登录 第三方登录 1.登录微博 2.点击网站接入 3.填写完信息&#xff0c;到这里&#xff0c;写入成功回调 和 失败回调 是重定向&#xff0c;所以可以写本地的地址 3.认证 分布式Session spring-session 域名不一样 发的 jSessionId 就不同&#xff0c…

自定义element主题

说明&#xff1a;这里使用的是vue3做的demo&#xff0c;所以使用的是element-plus&#xff0c;不同版本大同小异 一、安装element-plus npm install element-plus --save二、在main.ts中引入 import ElementPlus from "element-plus"; import "element-plus/d…

Kubernetes学习指南:保姆级实操手册03——规划部署

Kubernetes学习指南&#xff1a;保姆级实操手册03——规划部署 一、部署节点规划 Hostnameiprolesk8s-master0110.255.210.1masterk8s-master0210.255.210.2masterk8s-master0310.255.210.3masterk8s-node0110.255.210.4worker nodek8s-node0210.255.210.5worker nodek8s-nod…

【深度学习】LDA线性判别分析

date:2024/07/23 author:sion tag:Deeping Learn LDA(线性判别分析) 文章目录 LDA(线性判别分析)1.LDA是什么LDA是一种解决二分类问题的线性方法。它描述&#xff0c;对于给定样例集&#xff0c;将样例点投影到一条直线上&#xff0c;这条直线能使异样的样例相距远&#xff0c;…

Linus: vim编辑器的使用,快捷键及配置等周边知识详解

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 vim的安装创建新用户 adduser 用户名Linus是个多用户的操作系统是否有创建用户的权限查看当前用户身份:whoami** 怎么创建设置密码passwdsudo提权(sudo输入的是用户…