推荐用纯flex+flex-direction:column实现垂直时间轴，避免position:absolute；节点超15条时分批加载并禁用scroll-view的enable-flex；状态映射抽成对象，图标用字体图标，单位统一用rpx。
uni-app里用flex做垂直时间轴，别碰position: absolute
直接用绝对定位硬排物流节点，后期改样式、加动画、适配多端（尤其是小程序）会频繁掉坑。uni-app 的渲染层对 position: absolute 在不同平台表现不一致，比如微信小程序里子元素宽高计算异常，H5 里又可能遮挡点击区域。
推荐用纯 flex + flex-direction: column 实现可伸缩的垂直时间轴：
- 外层容器设
display: flex; flex-direction: column; - 每个物流项用
flex: 1;或固定min-height控制间距，避免依赖像素值 - 时间点图标用伪元素
::before或内联view实现，确保跨端一致性 - 文字内容用
flex: 1;填充剩余空间，自动换行不溢出
uni-app中scroll-view嵌套时间轴要防滚动卡顿
物流节点多（比如 20+ 条）时，直接塞进 scroll-view 容易触发重绘抖动，尤其在低端安卓机上明显。这不是性能问题，而是 scroll-view 内部滚动检测与 flex 布局交互导致的 layout thrashing。
实操建议：
- 节点数 > 15 条时，用
v-if分批加载，比如首次只渲染前 8 条，滚动到底部再loadMore - 禁用
scroll-view的enable-flex（默认 true），改用原生flex布局，否则内部会多一层包裹节点 - 所有物流项的
view加key，且 key 必须唯一（如用item.time + index），避免节点复用错乱 - 避免在物流项里放
rich-text或带样式的image，它们是滚动卡顿高频来源
物流状态颜色和图标怎么动态绑定才不翻车
淘宝式时间轴里，不同状态（已揽收/运输中/派件中/已签收）对应不同颜色、图标、甚至字体粗细。硬编码 class 名或 if-else 判断容易漏状态、难维护。
更稳的做法：
- 把状态映射抽成对象：
const statusMap = { 'DELIVERING': { color: '#FF9900', icon: 'truck' }, 'SIGNED': { color: '#00AA00', icon: 'check' } } - 模板中直接用
:class="`timeline-item--${item.status}`"+ 对应 CSS，比v-bind:class数组写法更易调试 - 图标统一用字体图标（如
uni-icons），别混用 SVG 或图片——小程序里 SVG 渲染不稳定，图片还得处理 base64 或 CDN 缓存 - 注意「已签收」后还要显示签收人和时间，这部分字段不一定每条都有，模板里得用
v-if="item.signer"守卫，别直接{{ item.signer }}
小程序真机调试时时间轴错位，八成是px单位惹的祸
开发时在 H5 看得好好的，一到微信小程序真机就发现时间线歪斜、图标偏移、文字截断——90% 是用了 px 固定值。uni-app 的 rpx 虽能响应式缩放，但 flex 布局中混用 px 和 rpx 会导致计算偏差，尤其在 iPhone SE 或小屏安卓机上。
必须统一的单位规则：
- 所有间距（
margin/padding）、尺寸（width/height）、圆角（border-radius）全部用rpx - 字体大小用
rpx，但慎用小于24rpx的值，iOS 小程序会模糊 - 时间点图标直径建议设为
36rpx，连线粗细用2rpx，这是目前各端最稳定的组合 - 如果必须用像素（比如对接原生插件），包一层
uni.upx2px(数字)转换，别手写px
复杂点不在逻辑，而在状态映射和单位一致性。漏掉一个 rpx 或少写一个 v-if 守卫，真机上就可能整段物流信息不可读。
