• uniapp 手写 简易 时间轴 组件

    一、案例如图

    该案例设计条件：

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

    二、编写逻辑

    1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容

    2. 样式难点：让子元素撑满父元素高度，通过给父元素 align-items: stretch;


    如何让内容居中对其？

    答：以左侧为例子，左侧高度为父元素高度，它里有开始时间、结束时间、黑点，只需要设置 justify-content: center;aligns-item:center;右侧同理

    如何让线条line边长，让上下内容有一段距离？

    答：只能单独设置一个div，让它的样式与 线的样式相同，有一个高度，用来隔开一段距离（暂时想到这个方法，有点麻烦）

    三、代码案例（没时间一步一步去写如何思考的，太忙了，赶着开发）

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>盛满父元素高度title>
    8.     <style>
    9.       .father {
    10.         display: flex;
    11.         flex-direction: row;
    12.         align-items: stretch;
    13.       }
    14.       .son1 {
    15.         background-color: yellowgreen;
    16.         width: 4px;
    17.         padding: 60px 0; /* 通过padding 让线条变长，使上下模块产生距离 */
    18.         margin: 0 10px;
    19.       }
    20.       .son2 {
    21.         width: 200px;
    22.         background-color: #d3e3fd;
    23.         display: flex;
    24.         justify-content: center;
    25.         align-items: center;
    26.       }
    27.       .circle {
    28.         width: 8px;
    29.         height: 8px;
    30.         border-radius: 50%;
    31.         background-color: #000;
    32.         position: relative;
    33.         left: 47px;
    34.       }
    35.  
    36.       .time {
    37.         width: 40px;
    38.         display: flex;
    39.         flex-direction: column;
    40.         justify-content: center;
    41.       }
    42.       .jianxi{
    43.         background-color: yellowgreen;
    44.         width: 4px;
    45.         margin: 0 10px;
    46.         height: 20px;
    47.         position: relative;
    48.         left: 40px;
    49.       }
    50.     style>
    51.   head>
    52.   <body>
    53.     <div class="father">
    54.       <div class="time">
    55.         <div>9:30div>
    56.         <div class="circle">div>
    57.         <div>9:45div>
    58.       div>
    59.       <div class="son1">div>
    60.       <div class="son2">这是子元素son2，它里面有很多内容，可以撑起一个高度div>
    61.     div>
    62.     <div class="jianxi">div>
    63.     <div class="father">
    64.       <div class="time">
    65.         <div>10:30div>
    66.         <div class="circle">div>
    67.         <div>10:45div>
    68.       div>
    69.       <div class="son1">div>
    70.       <div class="son2">
    71.         这是子元素son2，它里面有很多内容，可以撑起一个高度,这是子元素son2，它里面有很多内容，可以撑起一个高度这是子元素son2，它里面有很多内容，可以撑起一个高度
    72.       div>
    73.     div>
    74.   body>
    75. html>

  • 相关阅读:
    【JavaWeb】第一章 HTML标签
    本地websocket服务端暴露至公网访问【内网穿透】
    Ubuntu环境下DOSBOX的配置
    【JavaEE&Spring】Spring Web MVC⼊⻔
    Verilog参数、Verilog参数和属性冲突、整数处理
    解决 阿里云oss 对象存储 bucket 中的文件不能在线预览 只能下载
    购物H5商城架构运维之路
    无涯教程-JavaScript - XIRR函数
    面试官：Spring中获取Bean有几种方式？
    PowerDotNet平台化软件架构设计与实现系列（16）：财务平台
  • 原文地址：https://blog.csdn.net/tengyuxin/article/details/136479134