步骤条与进度条本质不同：步骤条是分阶段流程指引，需手写或第三方插件实现；progress组件无法支持阶段语义、节点对齐、点击跳转及多端动画，易导致布局错乱。
uni-app里步骤条和进度条不是一回事
很多人搜“步骤条进度展示”，其实是混淆了两个概念：uni-progress 是线性进度条，用于加载或任务完成度；而步骤条（step bar）是分阶段的流程指引，比如“填写 → 提交 → 审核 → 完成”。uni-app 官方组件库 uni-ui 没有提供现成的 uni-step-bar 或 uni-steps 组件，必须手写或引入第三方插件。
用 view + flex 实现轻量级步骤条
最常用、兼容性最好的方案是纯 CSS + v-for 渲染，不依赖 Canvas 或 SVG，避免小程序端样式错位或 iOS WebView 渲染异常。
- 外层用
view包裹，设display: flex; justify-content: space-between - 每个步骤项用
view包含图标 + 文字，通过:class控制当前/已完成/未开始状态 - 步骤线用伪元素或单独
view实现，宽度固定为100%，但需注意：真机上安卓低版本可能不支持::before在flex子项中正确拉伸，建议用绝对定位的线元素替代 - 进度推进逻辑靠
current值控制：比如steps = ['填写', '提交', '审核']，current = 1表示停留在第二步（索引从 0 开始），已走过的步骤加active类，当前步骤加current类
关键样式片段：
.step-line {
position: absolute;
top: 24rpx;
left: 0;
width: 100%;
height: 4rpx;
background-color: #e5e5e5;
z-index: 1;
}
.step-item {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.step-icon {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #fff;
}
.step-icon.active { background-color: #007AFF; }
.step-icon.current { background-color: #007AFF; border: 4rpx solid #fff; }
.step-text { margin-top: 12rpx; font-size: 24rpx; color: #666; }
.step-text.active, .step-text.current { color: #333; font-weight: 500; }
为什么不能直接用 progress 组件模拟步骤条
progress 组件本质是单值百分比渲染器，它没有“阶段语义”，也不支持中间节点标记。强行用 :percent="current / (steps.length - 1) * 100" 虽然能画出一条线，但无法解决以下问题：
- 步骤文字与图标无法对齐到进度点上（
progress不提供刻度锚点） - 点击某一步跳转时，
progress无法响应事件或反向驱动current - 微信小程序中
show-info显示的是数字，不是“提交中”这类语义化文案 - 在字节系小程序（抖音/TikTok）中，
progress的active动画不触发，导致步骤切换无反馈
真机调试时常见表现：步骤线长度正常，但图标全部堆在左侧，或文字错位到进度条下方——这基本就是用了 progress + 绝对定位硬凑导致的布局失控。
插件市场可选方案及避坑点
如果项目时间紧，可考虑插件市场高星组件，但要注意三点：
- 搜索关键词用「步骤条」或「steps」，别搜「进度条」，否则会混入大量环形/线性进度插件
- 优先选 GitHub 仓库更新时间在 2025 年后、明确标注支持「抖音小程序」和「鸿蒙 NEXT」的插件（如
uni-steps-barv2.3+） - 安装后务必检查其
props是否含direction（水平/垂直）、clickable（是否可点击跳转）、status（各步状态数组），缺失任一都可能需要二次封装 - 部分插件用
canvas绘制步骤线，在v-for列表中复用会导致内存泄漏，尤其在长列表页滚动时卡顿明显
真正容易被忽略的细节是：步骤条的「当前步」高亮色和「已完成步」颜色在深色模式下是否自动适配。很多插件只写了 #007AFF 这类硬编码色值，没做 @media (prefers-color-scheme: dark) 处理，上线后用户反馈“看不清”，就得临时 patch 样式。
