uniapp 手写 简易 时间轴 组件

一、案例如图

该案例设计条件:

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

二、编写逻辑

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

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

如何让内容居中对其?

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

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

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

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

html 复制代码
<!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>
相关推荐
2501_915918415 小时前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
用户9047066835715 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇16 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡16 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa16 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名19 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者820 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088920 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915106321 天前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式