使用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.rhkb.cn/news/94272.html

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

相关文章

71 # 协商缓存的配置:通过内容

对比&#xff08;协商&#xff09;缓存 比较一下再去决定是用缓存还是重新获取数据&#xff0c;这样会减少网络请求&#xff0c;提高性能。 对比缓存的工作原理 客户端第一次请求服务器的时候&#xff0c;服务器会把数据进行缓存&#xff0c;同时会生成一个缓存标识符&#…

day12 13-牛客67道剑指offer-JZ83、70、63、47、48、46、21、81

1. JZ83 剪绳子&#xff08;进阶版&#xff09; class Solution { public:int jumpFloorII(int number) {if(number < 1) return number;int temp 1;int res 0;/*2级台阶 23级台阶 44级台阶 65级台阶 16*/for(int i2; i<number; i){res 2 * temp;temp res;}return re…

docker 安装elasticsearch、kibana

下载es镜像 docker pull elasticsearch 启动es容器 docker run --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e ES_JAVA_OPTS"-Xms512m -Xmx512m" -d elasticsearch 验证es界面访问 ​​​​​http://节点ip:9200/ ​…

应用在汽车前照灯系统中的环境光传感芯片

为了保证行车照明的安全性和方便性&#xff0c;减轻驾驶员的劳动强度。近年来&#xff0c;出现了许多新的照明控制系统&#xff0c;例如用于日间驾驶的自动照明系统、光束调节系统、延迟控制等。尤其是汽车自适应前照灯系统&#xff0c;它是一种能够自动改变两种以上的光型以适…

零售行业供应链管理核心KPI指标(一) – 能力、速度、效率和成本

有关零售行业供应链管理KPI指标的综合性分享&#xff0c;涉及到供应链能力、速度、效率和成本总共九大指标&#xff0c;是一个大框架&#xff0c;比较核心也比较综合。 衡量消费品零售企业供应链管理效率和水平的核心KPI通常有哪些&#xff1f; 图片来源-派可数据&#xff08;…

SpringBoot 操作Redis、创建Redis文件夹、遍历Redis文件夹

文章目录 前言依赖连接 RedisRedis 配置文件Redis 工具类操作 Redis创建 Redis 文件夹查询数据遍历 Redis 文件夹 前言 Redis 是一种高性能的键值存储数据库&#xff0c;支持网络、可基于内存亦可持久化的日志型&#xff0c;而 Spring Boot 是一个简化了开发过程的 Java 框架。…

【ES6】—解构赋值

一、定义 解构赋值&#xff1a;解构赋值就是一种模式的匹配&#xff0c;只要等号两边的模式完全相同的&#xff0c;那么左边的变量就会被赋值对应右边的值 二、数组的解构赋值 PS&#xff1a;数组解构赋值时&#xff0c;是通过索引的唯一性赋值的 1. 一维数组解构赋值 (1)…

《Go 语言第一课》课程学习笔记(六)

变量声明&#xff1a;静态语言有别于动态语言的重要特征 变量所绑定的内存区域是要有一个明确的边界的。也就是说&#xff0c;通过这样一个变量&#xff0c;我们究竟可以操作 4 个字节内存还是 8 个字节内存&#xff0c;又或是 256 个字节内存&#xff0c;编程语言的编译器或解…

nginx部署时http接口正常,ws接口404

可以这么配置 map $http_upgrade $connection_upgrade {default upgrade; close; }upstream wsbackend{server ip1:port1;server ip2:port2;keepalive 1000; }server {listen 20038;location /{ proxy_http_version 1.1;proxy_pass http://wsbackend;proxy_redirect off;proxy…

FreeRTOS源码分析-12 低功耗管理

目录 1 STM32低功耗管理概念及应用 1.1睡眠模式 1.2 停止模式 1.3 待机模式 2 Tickless低功耗管理 2.1 Tickless低功耗模式介绍 2.2 FreeRTOS低功耗模式配置 2.3 FreeRTOS低功耗模式应用 3 低功耗管理实际项目开发 3.1 低功耗设计必须要掌握的硬件知识 …

LangChain-ChatGLM在WIndows10下的部署

LangChain-ChatGLM在WIndows10下的部署 参考资料 1、LangChain ChatGLM2-6B 搭建个人专属知识库中的LangChain ChatGLM2-6B 构建知识库这一节&#xff1a;基本的逻辑和步骤是对的&#xff0c;但要根据Windows和现状做很多调整。 2、没有动过model_config.py中的“LORA_MOD…

【Docker】 使用Docker-Compose 搭建基于 WordPress 的博客网站

引 本文将使用流行的博客搭建工具 WordPress 搭建一个私人博客站点。部署过程中使用到了 Docker 、MySQL 。站点搭建完成后经行了发布文章的体验。 WordPress WordPress 是一个广泛使用的开源内容管理系统&#xff08;CMS&#xff09;&#xff0c;用于构建和管理网站、博客和…

LeetCode235. 二叉搜索树的最近公共祖先

235. 二叉搜索树的最近公共祖先 文章目录 [235. 二叉搜索树的最近公共祖先](https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/)一、题目二、题解方法一&#xff1a;递归方法二&#xff1a;迭代 一、题目 给定一个二叉搜索树, 找到该树中两个指定…

故障011:dmap服务缺失libnsl.so修复

故障011&#xff1a;dmap服务缺失libnsl.so修复 1. 问题描述2. 解决方法2.1 初步分析2.2 动手实操2.2.1 模糊搜索大法2.2.2 僵桃代李大法 DM技术交流QQ群&#xff1a;940124259 1. 问题描述 今天遇二期XC环境&#xff0c;达梦DM 7.6的DmAPService备份辅助进程服务无法启动&a…

Python 函数

Built-in Functions — Python 3.11.4 documentation

C++基础语法——继承

1.继承是什么&#xff1f; 继承是一种面向对象编程的概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;从另一个类&#xff08;称为基类或父类&#xff09;继承属性和方法。继承使得子类能够使用基类已有的代码&#xff0c;并且可以在此基础上进行扩展或修…

CentOS系统环境搭建(十五)——CentOS安装Kibana

centos系统环境搭建专栏&#x1f517;点击跳转 关于Elasticsearch的安装请看CentOS系统环境搭建&#xff08;十二&#xff09;——CentOS7安装Elasticsearch。 CentOS安装Kibana 文章目录 CentOS安装Kibana1.下载2.上传3.解压4.修改kibana配置文件5.授予es用户权限6.kibana 后台…

win下qwidget全屏弹窗后其他窗口鼠标样式无法更新的问题

在win平台下&#xff0c;实现截取选桌面执行推理功能&#xff0c;用一个qwidget(j对象名为m_selectWidget)来显示选取范围的边框&#xff0c;但这个qwidget显示后&#xff0c;其他窗口在他下面可以接受鼠标相应的事件&#xff0c;但原来的鼠标形状功能失效&#xff08;mac正常&…

Linux的基本权限(文件,目录)

文章目录 前言一、Linux权限的概念二、Linux权限管理 1.文件访问者分类2.文件类型和访问类型3.文件访问权限的相关设置方法三、目录的权限四、权限的总结 前言 Linux下一切皆文件&#xff0c;指令的本质就是可执行文件&#xff0c;直接安装到了系统的某种路径下 一、Linux权限的…

jenkins使用

安装插件 maven publish over ssh publish over ssh 会将打包后的jar包&#xff0c;通过ssh推送到指定的服务器上&#xff0c;&#xff0c;在jenkins中设置&#xff0c;推送后脚本&#xff0c;实现自动部署jar包&#xff0c;&#xff0c; 装了这个插件之后&#xff0c;可以在项…