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

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

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.rhkb.cn/news/385106.html

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

相关文章

《Utilizing Ensemble Learning for Detecting Multi-Modal Fake News》

系列论文研读目录 文章目录 系列论文研读目录论文题目含义ABSTRACTINDEX TERMSI. INTRODUCTIONII. RELATED WORKA. FAKE NEWS CLASSIFICATION APPROACHES FOR SINGLE-MODALITY 单模态虚假新闻分类方法1) SINGLE-MODALITY BASED CLASSIFICATION APPROACHES USING TEXTUAL FEATUR…

家政项目小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;家政人员管理&#xff0c;家政服务管理&#xff0c;咨询信息管理&#xff0c;咨询服务管理&#xff0c;家政预约管理&#xff0c;留言板管理&#xff0c;系统管理 微信端账号功能…

Servlet1-Servlet程序、请求处理、继承体系

目录 什么是Servlet 手动实现Servlet程序 ​编辑url地址如何定位到Servlet程序去访问 Servlet的生命周期 ​编辑GET和POST请求的分发处理 通过继承HttpServlet类实现Servlet程序 IDEA菜单生成Servlet程序 Servlet类的继承体系 ServletConfig类 ServletContext类 什么…

go语言day19 使用git上传包文件到github Gin框架入门

git分布式版本控制系统_git切换head指针-CSDN博客 获取请求参数并和struct结构体绑定_哔哩哔哩_bilibili &#xff08;gin框架&#xff09; GO: 引入GIn框架_go 引入 gin-CSDN博客 使用git上传包文件 1&#xff09;创建一个github账户&#xff0c;进入Repositories个人仓…

新能源充电桩结构设计的核心要素

充电桩结构设计的核心要素 一、外观设计 外观设计对于用户体验和充电站的可接受性具有举足轻重的地位。其设计应遵循现代化、直观易懂的原则&#xff0c;同时符合人机工程学原理&#xff0c;以确保用户操作的便捷性。此外&#xff0c;外观设计还需与城市规划和环境美学相协调…

特斯拉财报看点:FSD拳打华为,Robotaxi 脚踢百度

大数据产业创新服务媒体 ——聚焦数据 改变商业 特斯拉发最新财报了&#xff0c;这不仅是一份财务报告&#xff0c;更是一张未来发展的蓝图。在这份蓝图中&#xff0c;两个关键词格外耀眼——FSD&#xff08;全自动驾驶系统&#xff09;和Robotaxi&#xff08;无人驾驶出租车&…

Linux_权限3

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

C++初学(2)

2.1、其他简单C语句例子 下面这个程序要求运行时输入值 #include <iostream> int main() {using namespace std;int yuanshi;cout << "How many yuanshi do you have?" << endl;cin >> yuanshi;cout << "Here are two more.&q…

高频面试题基本总结回顾(含笔试高频算法整理,暂存)

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

简单的CSS样式

样式分为三种 内部样式&#xff1a;写在html文件里的样式叫内部样式 内联样式&#xff1a;写在需要的标签中 外部样式&#xff1a;写在外部css文件里 可以通过不同的选择器来选择设置指定组件的样式&#xff1a; <style>/* 写在html文件里的样式叫内部样式 *//* 选择器 *…

C语言强化-3.单链表的新建、查找

与408的关联&#xff1a;1. 链表出了很多大题。 2. 任何数据结构&#xff0c;主要进行的操作就是增删改查。 头插法新建链表的实战 流程图 代码 #include <stdio.h> #include <stdlib.h>typedef int ElemType; typedef struct LNode{ElemType data;//数据域struc…

视频生成【文章汇总】SVD, Sora, Latte, VideoCrafter12, DiT...

视频生成【文章汇总】SVD, Sora, Latte, VideoCrafter12, DiT... 数据集指标 【arXiv 2024】MiraData: A Large-Scale Video Dataset with Long Durations and Structured Captions【CVPR 2024】VBench : Comprehensive Benchmark Suite for Video Generative Models【arxiv 20…

微信小程序支付流程

前端需要做的事情&#xff1a; 生成平台订单&#xff1a;前端调用接口&#xff0c;向后端传递购买的商品信息、收货人信息&#xff0c;&#xff08;后端生成平台订单&#xff0c;返回订单编号&#xff09;获取预付单信息&#xff1a;将订单编号发送给后端后&#xff0c;&#x…

我在Vscode学Java泛型(泛型设计、擦除、通配符)

Java泛型 一、泛型 Generics的意义1.1 在没有泛型的时候&#xff0c;集合如何存储数据1.2 引入泛型的好处1.3 注意事项1.3.1 泛型不支持基本数据类型1.3.2 当泛型指定类型&#xff0c;传递数据时可传入该类及其子类类型1.3.3 如果不写泛型&#xff0c;类型默认是Object 二、泛型…

.net 连接达梦数据库开发环境部署

.net 开发环境部署 1. 环境准备 测试工具 Visual Studio2022 数据库版本 dm8 2. 搭建过程 1 &#xff09;创建新项目 2 &#xff09;选择创建空项目 3 &#xff09;配置新项目 4 &#xff09;右键 DM1 新建一个项 5 &#xff09;加 载 驱 动 &#xff0c; 新 建 …

SQL labs-SQL注入(五,使用sqlmap进行cookie注入)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 引言&#xff1a; Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时&#xff0c;在连接关闭后&#xff0c;服务端不会记录用户的信息。Cookie…

加速决策过程:企业级爬虫平台的实时数据分析

摘要 在当今数据驱动的商业环境中&#xff0c;企业如何才能在海量信息中迅速做出精准决策&#xff1f;本文将探讨企业级爬虫平台如何通过实时数据分析加速决策过程&#xff0c;实现数据到决策的无缝衔接。我们聚焦于技术如何赋能企业&#xff0c;提升数据处理效率&#xff0c;…

RK3568 Linux 平台开发系列讲解(内核入门篇):从内核的角度看外设芯片的驱动

在嵌入式 Linux 开发中,外设芯片的驱动是实现操作系统与硬件之间交互的关键环节。对于 RK3568 这样的处理器平台,理解如何从内核的角度构建和管理外设芯片的驱动程序至关重要。 1. 外设驱动的基础概念 外设驱动(Device Driver)是操作系统与硬件设备之间的桥梁。它负责控…

mysql面试(六)

前言 本章节详细讲解了一下mysql执行计划相关的属性释义&#xff0c;以及不同sql所出现的不同效果 执行计划 一条查询语句经过mysql查询优化器的各种基于成本和各种规则优化之后&#xff0c;会生成一个所谓的 执行计划&#xff0c;这个执行计划展示了这条查询语句具体查询方…

【计算机网络】TCP协议详解

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 1、引言2、udp和tcp协议的异同3、tcp服务器3.1、接口认识3.2、服务器设计 4、tcp客户端4.1、客户端设计4.2、说明 5、再研Tcp服务端5.1、多进程版5.2、多线程版 5、守护进程化5.1、什么是守护进程5.2…