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

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

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.xdnf.cn/news/1486739.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

操作系统——笔记(1)

操作系统是管理计算机硬件资源&#xff0c;控制其他程序运行并为用户提供交互操作界面的系统软件的集合&#xff0c;控制和管理着整个计算机系统的硬件和软件资源&#xff0c;是最基本的系统软件。 常见的操作系统&#xff1a;ios、windows、Linux。 计算机系统的结构层次&am…

“论软件测试中缺陷管理及其应用”写作框架,软考高级论文,系统架构设计师论文

原创范文 软件缺陷指的是计算机软件或程序中存在的某种破坏正常运行能力的问题、错误&#xff0c;或者隐藏的功能缺陷。缺陷的存在会导致软件产品在某种程度上不能满足用户的需要。在目前的软件开发过程中&#xff0c;缺陷是不可避免的。软件测试是发现缺陷的主要手段&#xf…

计算机网络基础:2.TCP/IP模型中的各层协议、IP地址

一、TCP/IP模型中的各层协议 接着第一篇餐厅运营的例子来解释一下TCP/IP五层模型中的每一层协议&#xff1a; 1. 应用层&#xff08;餐饮一体机&#xff09; 在TCP/IP模型中&#xff0c;应用层直接与用户交互&#xff0c;提供网络服务。这一层将OSI模型的应用层&#xff08;点…

colab进行keras入门随机数和标签的一点思考,例如shape和Dense等

keras官方中文文档 pip install kerasfrom keras import layers from keras import modelsmodel.add(layers.Dense(32,activationrelu,input_shape(100,)))# 添加多个Dense层 model.add(layers.Dense(10,activationsoftmax)) model.compile(optimizerrmsprop,losscategorical_…

pikachu之sql lnjet 字符型注入

先测试一下闭合 注释符号&#xff1a;-- 注释符号可以忽略其后的内容&#xff0c;使得后续的原始查询内容不会影响我们注入的SQL代码。 条件测试&#xff1a;通过and 11和and 12分别测试真假条件&#xff0c;可以判断输入是否成功闭合&#xff0c;并且可以检测注入是否成功。 …

Kotlin 协程 — 基础

Kotlin 协程 — 基础 协程已经存在一段时间了&#xff0c;关于它的各种文章也很多。但我发现想要了解它还比较费时&#xff0c;所以我花了一段时间才真正理解了协程的基础知识以及它的工作原理。因此&#xff0c;我想分享一些我理解到的内容。 什么是协程&#xff1f; 协程代表…

关于OLED的I2C手册记录

首先我们从淘宝上面找到对应OLED 4pin iic驱动的ssd1306手册&#xff0c;它有多种的驱动方式&#xff0c;我们只需要看看他这个i2c模式。 我们可以从中看到 Slave address R/W后面的#代表低电平是W。 SA0是它的一个 slave address bit 可以使用 这两个都可以作为OLED的 设备…

分布式事务与Seata落地

分布式事务与Seata落地 一、事务基础 1.1 本地事务 事务指的就是一个操作单元, 在这个操作单元中的所有操作最终要保持一致的行为, 要么所有操作都成功, 要么所有的操作都被撤销。 1.2 本地事务特性 本地事务四大特性: ACID A: 原子性(Atomicity), 一个事务中的所有操作, …

如何通过一条SQL变更多个分库分表?

数据库发展到今天&#xff0c;分库分表已经不是什么新鲜话题了&#xff0c;传统的单节点数据库架构在数据量和访问频次达到一定规模时&#xff0c;会出现性能瓶颈和扩展性问题&#xff0c;而分库分表技术通过将数据分散到多个数据库实例中来分担负载&#xff0c;从而提升系统的…

数字信号||离散序列的基本运算(2)

实验二 离散序列的基本运算 一、实验目的 (1)进一步了解离散时间序列时域的基本运算。 (2)了解MATLAB语言进行离散序列运算的常用函数&#xff0c;掌握离散序列运算程序的编写方法。 二、实验涉及的MATLAB子函数 1.find 功能&#xff1a;寻找非零元素的索引号。 调用格…

BGP选路之Local Preference

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由。BGP首先比较的是路由信息的首选值&#xff08;PrefVal)&#xff0c;如果 PrefVal相同&#xff0c;就会比较本…

Linux_权限3

Linux所对应的文件类型 1.在Win下&#xff0c;有文件类型&#xff0c;通常通过后缀标识 日常用的就是windows系统这里不做举例. 2.Linux的文件类型不通过后缀区分&#xff08;不代表Linux不用后缀) 其中需要注意的是第一个字符表示文件类型的含义 - :普通文件, 文本, 源代码…

解决:uniapp 小程序 使用swiper 内部嵌套另外一个拥有左右滑动组件导致滑动冲突

解决办法 在swiper-item 内增加这个属性进行包裹 touchmove.stop <div touchmove.stop><qiun-data-charts type"area" :opts"optsStg" :chartData"dateDataStg" /> </div>

嘉立创|如何在原理图中框选任意元件

点击编辑—选择对象—对边形内部 便可以任意框选 选中之后&#xff0c;进入pcb板界面也选中了相同器件

使用kali对操作系统和网络服务类型进行探测

1&#xff0e;在Kali终端中输入命令“nmap –sS –n -O 192.168.2.2”&#xff0c;探测目标主机的操作系统类型 2&#xff0e; 在Kali终端中输入命令“nmap –sV -n 192.168.2.2”&#xff0c;探测目标主机开启的网络服务类型 3.在Kali终端中输入命令“nmap –A -n 192.168.2.2…

Linux中的System V通信标准--共享内存、消息队列以及信号量

关于 System V 标准&#xff0c;一共有三种通信方式&#xff0c;分别为&#xff1a;共享内存、信号量和消息队列三种通信方式。本篇将较为详细的讲解三种通信方式的实现原理&#xff0c;以及介绍在 Linux 系统下调用这三种的通信方式的接口&#xff0c;其中以共享内存为例&…

.netcore TSC打印机打印

此文章给出两种打印案例&#xff0c; 第一种是单列打印&#xff0c;第二种是双列打印 需要注意打印机名称的设置&#xff0c;程序中使用的打印机名称为999&#xff0c;电脑中安装打印机时名称也要为999。 以下是我在使用过程中总结的一些问题&#xff1a; 一 TSC打印机使用使…

【区块链+绿色低碳】巴中市生态价值核算创新应用 | FISCO BCOS应用案例

生态产品总值&#xff08;GEP&#xff09;&#xff0c;指一定区域生态系统为人类福祉和经济社会可持续发展提供的产品与服务价值总和&#xff0c;包 括供给产品价值、调节服务价值和文化服务价值。当前&#xff0c;推动生态产品价值有效转化存在“难度量、难抵押、难交易、 难变…

【机器学习算法基础】(基础机器学习课程)-08-决策树和随机森林-笔记

一、决策树之信息论基础 决策树是一种用来做决策的工具&#xff0c;就像我们生活中的选择树。例如&#xff0c;你在选择今天穿什么衣服时&#xff0c;会根据天气情况、出行活动等进行判断。决策树的构建过程涉及一些信息论的概念&#xff0c;用来衡量和选择最好的“分叉点”来进…

Adobe Dimension(DN)安装包软件下载

目录 一、软件简介 二、软件下载 三、注意事项 四、软件功能 五、常用快捷键 快捷键&#xff1a; 一、软件简介 Adobe Dimension&#xff08;简称DN&#xff09;是Adobe公司推出的一款三维设计和渲染软件。与一般的3D绘图软件相比&#xff0c;DN在操作界面和功能上有所不…