本文主要是介绍uniapp 手写 简易 时间轴 组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、案例如图
该案例设计条件：
左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离
二、编写逻辑
1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容
2. 样式难点：让子元素撑满父元素高度，通过给父元素 align-items: stretch;
如何让内容居中对其？答：以左侧为例子，左侧高度为父元素高度，它里有开始时间、结束时间、黑点，只需要设置 justify-content: center;aligns-item:center;右侧同理
如何让线条line边长，让上下内容有一段距离？答：只能单独设置一个div，让它的样式与 线的样式相同，有一个高度，用来隔开一段距离（暂时想到这个方法，有点麻烦）
三、代码案例（没时间一步一步去写如何思考的，太忙了，赶着开发）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盛满父元素高度</title><style>.father {display: flex;flex-direction: row;align-items: stretch;}.son1 {background-color: yellowgreen;width: 4px;padding: 60px 0; /* 通过padding 让线条变长，使上下模块产生距离 */margin: 0 10px;}.son2 {width: 200px;background-color: #d3e3fd;display: flex;justify-content: center;align-items: center;}.circle {width: 8px;height: 8px;border-radius: 50%;background-color: #000;position: relative;left: 47px;}.time {width: 40px;display: flex;flex-direction: column;justify-content: center;}.jianxi{background-color: yellowgreen;width: 4px;margin: 0 10px;height: 20px;position: relative;left: 40px;}</style></head><body><div class="father"><div class="time"><div>9:30</div><div class="circle"></div><div>9:45</div></div><div class="son1"></div><div class="son2">这是子元素son2，它里面有很多内容，可以撑起一个高度</div></div><div class="jianxi"></div><div class="father"><div class="time"><div>10:30</div><div class="circle"></div><div>10:45</div></div><div class="son1"></div><div class="son2">这是子元素son2，它里面有很多内容，可以撑起一个高度,这是子元素son2，它里面有很多内容，可以撑起一个高度这是子元素son2，它里面有很多内容，可以撑起一个高度</div></div></body>
</html>
这篇关于uniapp 手写 简易 时间轴 组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
