使用css实现时间线布局(TimeLine)

前言

在使用uni-app开发微信小程序过程中,遇到了时间轴布局,由于每项的内容高度不一致,使用uniapp自带的扩展组件uni-steps,样式布局无法对齐竖线,于是自己造轮子,完成特殊的布局。显示效果如下:

 

 

实现

实现这种布局,有两种实现方式,

第一种:使用css伪类实现;

第二种:使用纯css实现。

具体演示代码

第一种方式:使用css伪类实现。效果如图一

1、样式文件

<style scoped lang="scss">
.timeline{margin: 64rpx auto 0rpx auto;position: relative;width: 100%;&:before{background-color: #6DD1C9;content: '';margin-left: -1rpx;position: absolute;top: 0rpx;left: 14rpx;width: 2rpx;bottom: -250rpx;height: calc(100% - 47rpx);}.timeline-event{position: relative;}.timeline-event-copy {padding: 32rpx 24rpx;position: relative;top: -47rpx;left: 42rpx;width: 536rpx;background-color: #FFFFFF;margin-bottom: 20rpx;border-radius: 20rpx;}.timeline-event-icon{background-color: #ffffff00;outline: 0rpx solid #FF0000;display: block;margin: 0rpx 0rpx 0rpx 0rpx;position: absolute;top: 0rpx;left: 0rpx;width: 28rpx;height: 28rpx;}.timeline-event-thumbnail{color: #38254D;font-weight: bold;font-size: 30rpx;display: inline-flex;width: 100%;margin-bottom: 0rpx;align-items: center;justify-content: space-between;}.timeline-event-content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}}
}
</style>

2、布局文件

<view class="timeline"><block v-for="(item,index) in 4" :key="index"><view class="timeline-event"><image class="timeline-event-icon" src="/static/record/table.png"></image><view class="timeline-event-copy"><view class="timeline-event-thumbnail">4月22日(周二) 18:00-19:00</view><view class="timeline-event-content"><text>教练:David Beckham</text><text>地点:西沙群岛 · 永兴岛</text><text>教室:A教室</text><view v-if="index==0" class="btn">取消请假</view></view></view></view></block>
</view>

第二种方式:使用纯css实现。效果如图二

1、样式文件

<style lang="scss">
.timeline-list{margin: 32rpx;font-size: 28rpx;list-style: none;
}
.timeline-item:last-child .timeline-item_tail {display: none;
}
.timeline-item{position: relative;padding-bottom: 20rpx;
}
.timeline-item_tail{position: absolute;left: 4rpx;height: 100%;border-left: 2rpx solid rgba(109, 209, 201, 0.3);
}.timeline-item_node{position: absolute;background-color: #FFFFFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;left: -12rpx;width: 22rpx;height: 22rpx;background: #fff;border:6rpx solid #6DD1C9;
}
.timeline-item_wrapper{position: relative;padding: 32rpx 24rpx;left: 42rpx;top: -32rpx;background-color: #ffffff;border-radius: 20rpx;width: 600rpx;
}
.timeline-item_timestamp{color: #38254D;font-weight: bold;font-size: 30rpx;    line-height: 32rpx;
}
.timeline-item_content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}
}
</style>

2、布局文件

<view class="timeline-list"><block  v-for="(item, index) in 3" :key="index"><view class="timeline-item"><view class="timeline-item_tail"></view><view class="timeline-item_node"></view><view class="timeline-item_wrapper"><view class="timeline-item_timestamp">4月22日(周二) 18:00-19:00</view><view class="timeline-item_content"><text>教练:David Beckham</text><text>地点:西沙群岛 · 永兴岛</text><text>教室:A教室</text><view v-if="index==0" class="btn">取消请假</view></view></view></view></block>
</view>

ps:使用方式1,无法隐藏最后一项的时间线,而第二种方式,可以随时控制每一项的时间线。个人推荐第二种方式。

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

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

相关文章

linux shell变量

linux shell变量 1、变量命名规则2、只读变量3、删除变量 1、变量命名规则 变量名不能加$命名只能使用英文字母、数字和下划线&#xff0c;首个字母不能以数字开头中间不能有空格。可以有下划线不能使用标点符号不能使用bash中的关键字 username"tom"引用 $userna…

WebDAV之π-Disk·派盘+Commander One

Commander one是一款为Mac用户设计的双窗格文件管理器,Commander One专业版在原先的版本功能拥有较大的提升。Commander One PRO可以帮助大家将文件从一个地方复制到另一个地方,支持多标签浏览、搜索、自定义热键设置、显示隐藏文件等功能。 π-Disk派盘 – 知识管理专家 派…

(一)创建型设计模式:4、原型模式(Prototype Pattern)

目录 1、原型模式的含义 2、C实现原型模式的简单实例 1、原型模式的含义 通过复制现有对象来创建新对象&#xff0c;而无需依赖于显式的构造函数或工厂方法&#xff0c;同时又能保证性能。 The prototype pattern is a creational design pattern in software development. …

【校招VIP】java语言考点之Map1.7和1.8

考点介绍&#xff1a; HashMap是大中小厂面试的高频考点&#xff0c;主要从底层结构&#xff0c;和线程安全等角度来进行考察&#xff0c;考察点比较集中&#xff0c;但是有一定难度。 分为初级和高级两种&#xff1a;初级一般集中在中小公司的map的key-value的可重复和可空问题…

Server - WandB 统计运行 Epoch 以及 手动上传日志

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132227253 WandB (Weights & Biases) 是在线的模型训练可视化工具&#xff0c;可以帮助跟踪机器学习项目&#xff0c;记录运行中的超参数和输…

linux shell快速入门

linux shell快速入门 0 、前置1、简单使用 0 、前置 一安装linux的虚拟环境 1、简单使用 1、新建/usr/shell目录 2、新建hello.sh 文件 3、编写脚本文件# !/bin/bashecho "hello world"查看是否具备执行权限 新增执行权限 chomd x hello.sh执行hello.sh文件 /b…

限制编辑下的PDF可以转换其他格式吗?这2个方法可行

我们知道&#xff0c;PDF可以通过设置“限制编辑”来保护文件不被随意更改&#xff0c;那PDF设置了“限制编辑”还可以转换其他格式吗&#xff1f; 如果PDF设置的是禁止任何更改的“限制编辑”&#xff0c;那PDF菜单【转换】界面下的格式选项就会呈现灰色状态&#xff0c;无法…

vscode的配置和使用

1.侧边栏调整大小 放大&#xff1a;View -> Appearance -> Zoom in&#xff08;快捷键Ctrl &#xff09; 缩小&#xff1a;View -> Appearance -> Zoom out&#xff08;快捷键Ctrl -&#xff09; 侧边栏字体调整到合适大小后&#xff0c;可以按下一步调整代码区…

【java】Java与SQLite3数据库类型之间对应关系

引 在开发应用程序时&#xff0c;经常需要将数据存储到数据库中。SQLite3 是一种轻量级的嵌入式数据库&#xff0c;广泛应用于移动设备和嵌入式系统。在使用 SQLite3 数据库时&#xff0c;了解 Java 数据类型与 SQLite3 数据库类型之间的对应关系非常重要&#xff0c;以便正确…

一盏茶的时间,带你轻松上手Pinia

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 &#x1f4da; 前言 &#x1f4d8; 创建 Pinia &#x1f4d8; Option Store &#x1f4d8; Pinia 提供多种选项配…

k8s pod启动报错: no route to host

k8s pod kuboard启动报错 查看pod命令 kubectl get pods -A kubectl get pods --all-namespaces查看报错pod日志 命令&#xff1a; kubectl logs -f -n namespace nametime"2023-08-09T13:40:3608:00" levelerror msg"不能获取 AgentEndpointsGet \"http:/…

在 Linux 中使用 systemd 注册服务

Systemd 是一种现代的 Linux 系统初始化系统和服务管理器。它旨在管理系统服务的初始化、配置和控制。Systemd 的一个关键特性是它可以管理服务&#xff0c;这些服务是为系统提供特定功能的后台进程。在本指南中&#xff0c;我们将探讨如何使用 systemd 在 Linux 中注册服务。 …

【算法基础20-单调栈】

算法原理: 用单调递增栈&#xff0c;当该元素可以入栈的时候&#xff0c;栈顶元素就是它左侧第一个比它小的元素。 以&#xff1a;3 4 2 7 5 为例&#xff0c;过程如下&#xff1a; 动态模拟过程 题目&#xff1a; 给定一个长度为 N 的整数数列&#xff0c;输出每个数左边第一…

Linux 基础(九)软件包管理

软件包管理 概念软件包管理工具Red Hat 系RPMrpm安装rpm卸载 YUM&#xff08;推荐&#xff09;源仓库管理常见国内 yum 源更换源&#xff08;非必须&#xff0c;除非下载速度确实过慢&#xff09; YUM管理软件 Debian 系源仓库管理常见国内 apt 源更换源&#xff08;非必须&…

postman入门基础 —— 接口测试流程

一、编写接口测试计划 接口测试计划和功能测试计划目标一致&#xff0c;都是为了确认需求、确定测试环境、确定测试方法&#xff0c;为设计测试用例做准备&#xff0c;初步制定接口测试进度方案。一般来说&#xff0c;接口测试计划包括概述、测试资源、测试功能、测试重点、测试…

Flutter 报错 Could not create task ‘xxx‘.this and base files have different roots

遇到此问题也是先去百度了&#xff0c;有的说改了Gradle版本、gradle-wrapper.properties版本和ext.kotlin_version版本之后解决的&#xff0c;我没尝试&#xff0c;我用蹩脚的英语大致读了一下就不是这样说的&#xff0c;况且我用有道翻译了也不是这个意思啊&#xff0c;我不知…

抖音小程序实现less语言编译样式

1.在抖音开发工具中搜索扩展less 2. 然后点击小齿轮选择扩展设置 3. 然后在扩展设置中选择在settings.json中编辑# 4. 在settings.json中加入以下这段代码即可 // Easy LESS配置"less.compile": {"compress": false,//是否压缩"sourceMap": fal…

前端性能优化:缓存

在快节奏的互联网时代&#xff0c;网站的加载速度直接影响用户体验和业务成功。而缓存作为性能优化的重要手段&#xff0c;可以大幅提升网页加载速度&#xff0c;减少服务器负担。本文将为你详解缓存的使用&#xff0c;帮助你优化前端性能&#xff0c;为用户呈现更快速、流畅的…

EndNote 21 for Mac(文献管理软件) v21.0.1中文版

EndNoter mac是一款参考文献管理软件&#xff0c;旨在帮助学术研究者、学生和专业人士有效地管理和引用参考文献。该软件提供了许多功能&#xff0c;使用户可以轻松地组织、搜索和引用各种类型的文献。 EndNoter mac软件特点和功能 1. 参考文献管理&#xff1a;EndNoter允许用…

提高 After Effects 效率的 40 个最佳快捷键

After Effects 是运动图形和视觉效果的强大工具&#xff0c;但它也可能让人不知所措。拥有如此多的特性和功能&#xff0c;很容易让人迷失在软件中。但是&#xff0c;有一种方法可以简化您的工作流程并提高工作效率 - 使用键盘快捷键。 After Effects素材文件巨大、占用电脑内…