在日常业务中，我们经常会在移动端应用界面看到各种样式的步骤条。

步骤条可以告知用户需要操作的步骤，以及每步所需填写的大概内容，适用于引导用户去进行一系列连续操作的场景，比如付款或者用户注册。

但具体的业务场景，需要业务开发自行适配，决定用户要填写的内容。

合理运用步骤条，可以让用户对整体任务有预期并简化任务，从而提升用户体验。

本期小编就带大家了解移动端步骤条的使用方法，教你配置样式美观的步骤条，满足你的个性化需求~

Step1 步骤项配置

首先，在移动端表单设计器添加步骤条控件，在步骤条控件属性：【步骤条选项】中配置步骤条的每一个步骤项的相关配置内容，包含步骤标题和描述。

注：最终步骤条控件展示的数量是由步骤条选项的数量来决定的。

Step2 选择步骤条类型

目前步骤条分为标准步骤条和数字步骤条两种类型。

标准步骤条
适用于步骤较少，无需强调步骤的数量和位置的场景。

数字步骤条
适用于需要强调步骤的数量和位置的场景。

Step3 设置步骤条方向

目前步骤条有水平和垂直两种方向。

水平方向
在移动端，水平方向空间有限，适合步骤条内容及数量固定的场景，可用于任务简化显示。

垂直方向
扩展性更好，适合步骤选项进度数量不固定的场景

Step4 更新指定步骤项状态

当用户开始任务，步骤改变时，需要更新已经完成和正在进行的节点状态。步骤条一共有4种状态：

已完成（finish）
进行中（process）
未开始（wait）
警示／错误（error）

插件代码如下所示：

private void setStep(int step){
Step steps = this.getControl('STEPSAP');
//设置指定节点状态
Map<String,Object> currentStepMap = new HashMap<>();
currentStepMap.put('currentStep',step);
currentStepMap.put('currentStatus',Steps.PROCESS);
 //更新指定节点
steps.setCurrentStep(currentStepMap);
}

Step5 全量更新步骤条信息

接下来，需要根据用户的选择动态更改步骤条项的全部内容。

例如在付款界面，用户可能有多种付款方式，选择不同的付款方式，后续一系列流程也随之不同，这时就需要全量更新步骤条选项的信息。

插件代码如下所示：

private void setStepInfo(List<StepOptions> stepsOptions){
Step steps = this.getControl('STEPSAP');
steps.setClientStepsOptions(stepsOptions);
}

注意：

用户更新步骤条控件的步骤项内容和状态时，有时候会发现设置的步骤项状态和显示的步骤项状态不一样。这时候，有些用户可能会以为是前端显示有问题。

如果这样想，那就是没有正确理解步骤条控件。设置步骤条控件每一项的状态时，需要注意下述规则：

先于当前步骤的状态：可为已完成或异常，不能为等待或进行中
当前步骤的状态：可为进行中或异常或者完成，不能为等待或已完成
晚于当前步骤的状态：可为等待或异常，不能为已完成或进行中

然后，可以使用前述setCurrentStep方法，去设置“当前步骤”所在的那个步骤项。

根据以上步骤，即可完成移动端步骤条的设置。

以上就是本期的全部内容啦！如何设置样式美观的步骤条，你学会了吗？

#往期推荐#

# 不花钱就能用的界面规则，让你的列表更美观！

# 大任务后台处理中心，节省时间的好帮手

# 360°教你搞定“自定义控件开发”

# 页面布局，从理论到实操，从入门到精通（上）

# 一篇揭秘如何实现“徽标”效果的好文，速看！

更多精彩内容，“码”上了解！↓

简约美观的移动端步骤条，你值得拥有！

简约美观的移动端步骤条，你值得拥有！

恭喜您！