uniapp 手写简易时间轴组件

布满荆棘的人生 2024-04-22 15:21 57阅读 0赞

## 一、案例如图 ##

![7d7b87bb9f1047ddb156e4ea3f63c7eb.png][]

该案例设计条件：

> 左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离

##  ##

## 二、编写逻辑 ##

> 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>

[7d7b87bb9f1047ddb156e4ea3f63c7eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6332f45736c440ae958bd51a8533c996.png