uniapp 手写简易时间轴组件

tengyuxin

已于 2024-03-05 16:37:19 修改

阅读量1.3k

点赞数 8

分类专栏： uniapp 文章标签： uni-app

于 2024-03-05 15:23:06 首次发布

本文链接：https://blog.csdn.net/tengyuxin/article/details/136479134

版权

uniapp 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

一、案例如图

该案例设计条件：

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

二、编写逻辑

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>