uni-steps纵向排列需手动覆盖css：设.uni-steps__item{flex-direction:column!important}、.uni-steps__line{width:0!important;height:40rpx;transform:translatey(-50%)}，并确保父容器有固定高度；手写view+flex-column结构更可控。
uni-app 里用 uni-steps 实现纵向排列但样式不生效？
直接设 direction="column" 不够，uni-steps 默认只适配横向布局，纵向时内部 flex 结构没重排，图标、文字、连线会错位或重叠。必须配合自定义 CSS 强制修正子元素流向和间距。
常见错误现象：direction="column" 后步骤项堆成一列但文字挤在图标右侧、连接线消失、active 状态颜色不响应。
- 务必给父容器设固定高度或
min-height，否则纵向内容可能被截断 -
uni-steps的.uni-steps__item内部是flex-direction: row，需用深度选择器覆盖：.uni-steps__item { flex-direction: column !important; align-items: flex-start; } - 连接线默认是横向的
width，纵向时要改成height并旋转：.uni-steps__line { width: 0 !important; height: 40rpx; transform: translateY(-50%); }
不用 uni-steps，手写垂直步骤条更可控
官方组件对纵向支持弱，且无法精细控制每个步骤的图标、连接线粗细、圆点大小等。手写结构反而更稳定，尤其当需要适配深色模式、动态添加步骤、或点击跳转时。
核心结构就三部分：圆点（view）、连接线（view）、文字块（view），全部用 flex-direction: column 堆叠。
- 每步用一个
view.step-item包裹，设置position: relative便于绝对定位连接线 - 圆点用
border-radius: 50%+background控制颜色，active 状态靠v-if或 class 切换 - 连接线放在当前项底部，用
position: absolute; bottom: -20rpx;向下延伸，最后一项不渲染连接线 - 文字描述用
margin-top: 16rpx隔开，避免和上一项圆点粘连
u-steps（uView）纵向配置要点
如果你项目已引入 uView，u-steps 比 uni-steps 对纵向支持更好，但仍有坑：
- 必须传
direction="column"，且不能只写在标签上，要确保options数组长度 ≥ 2，否则内部逻辑会 fallback 回 row -
u-step插槽里的内容默认居中，纵向时文字容易偏右，需加text-align: left到插槽内最外层view - 连接线颜色由
active-color控制，但 inactive 状态的线颜色无法单独设，得用 CSS 覆盖：.u-steps__line--inactive { background-color: #e5e5e5 !important; } - 真机上 iOS 微信环境可能出现连接线虚化，加
transform: translateZ(0)强制硬件加速
滚动容器里放垂直步骤条，怎么防止内容被截断？
垂直步骤条常用于审批流、物流跟踪等长流程，用户需滑动查看全部步骤。但 scroll-view 默认不触发内部 flex 布局重排，导致最后一项被切掉。
- 别用
scroll-y直接包uni-steps，先套一层普通view并设style="overflow-y: auto;" - 给该容器设明确高度，比如
height: 60vh或max-height: 600rpx，否则在某些安卓机型上滚动失效 - 若步骤动态加载，每次 push 新项后调用
uni.createSelectorQuery().select('.step-container').boundingClientRect()手动触发重绘 - 慎用
scroll-into-view自动滚动到某步——它依赖元素 ID，而v-for生成的 ID 在 H5 和小程序表现不一致
uni-steps，用纯 view + flex-column 手写结构，控制权全在自己手里。纵向步骤条真正难的不是“怎么画出来”，而是“怎么让每一步的视觉权重、间距、状态反馈在不同屏幕宽度下都保持一致”——这靠组件库默认样式很难做到。
