uni-app如何实现步骤条进度展示-uni-app-PHP中文网

步骤条与进度条本质不同：步骤条是分阶段流程指引，需手写或第三方插件实现；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 + 绝对定位硬凑导致的布局失控。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

插件市场可选方案及避坑点

如果项目时间紧，可考虑插件市场高星组件，但要注意三点：

搜索关键词用「步骤条」或「steps」，别搜「进度条」，否则会混入大量环形/线性进度插件
优先选 GitHub 仓库更新时间在 2025 年后、明确标注支持「抖音小程序」和「鸿蒙 NEXT」的插件（如 uni-steps-bar v2.3+）
安装后务必检查其 props 是否含 direction（水平/垂直）、clickable（是否可点击跳转）、status（各步状态数组），缺失任一都可能需要二次封装
部分插件用 canvas 绘制步骤线，在 v-for 列表中复用会导致内存泄漏，尤其在长列表页滚动时卡顿明显