简约美观的移动端步骤条，你值得拥有！
在日常业务中，我们经常会在移动端应用界面看到各种样式的步骤条。
步骤条可以告知用户需要操作的步骤，以及每步所需填写的大概内容，适用于引导用户去进行一系列连续操作的场景，比如付款或者用户注册。
但具体的业务场景，需要业务开发自行适配，决定用户要填写的内容。
合理运用步骤条，可以让用户对整体任务有预期并简化任务，从而提升用户体验。
本期小编就带大家了解移动端步骤条的使用方法，教你配置样式美观的步骤条，满足你的个性化需求~
Step1 步骤项配置
首先，在移动端表单设计器添加步骤条控件，在步骤条控件属性：【步骤条选项】中配置步骤条的每一个步骤项的相关配置内容，包含步骤标题和描述。
注：最终步骤条控件展示的数量是由步骤条选项的数量来决定的。
Step2 选择步骤条类型
目前步骤条分为标准步骤条和数字步骤条两种类型。
标准步骤条
适用于步骤较少，无需强调步骤的数量和位置的场景。
数字步骤条
适用于需要强调步骤的数量和位置的场景。
Step3 设置步骤条方向
目前步骤条有水平和垂直两种方向。
水平方向
在移动端，水平方向空间有限，适合步骤条内容及数量固定的场景，可用于任务简化显示。
垂直方向
扩展性更好，适合步骤选项进度数量不固定的场景
Step4 更新指定步骤项状态
当用户开始任务，步骤改变时，需要更新已经完成和正在进行的节点状态。步骤条一共有4种状态：
已完成（finish）
进行中（process）
未开始（wait）
警示／错误（error）
插件代码如下所示：
private void setStep(int step){
Steps 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){
Steps steps = this.getControl('STEPSAP');
steps.setClientStepsOptions(stepsOptions);
}注意：
用户更新步骤条控件的步骤项内容和状态时，有时候会发现设置的步骤项状态和显示的步骤项状态不一样。这时候，有些用户可能会以为是前端显示有问题。
如果这样想，那就是没有正确理解步骤条控件。设置步骤条控件每一项的状态时，需要注意下述规则：
先于当前步骤的状态：可为已完成或异常，不能为等待或进行中
当前步骤的状态：可为进行中或异常或者完成，不能为等待或已完成
晚于当前步骤的状态：可为等待或异常，不能为已完成或进行中
根据以上步骤，即可完成移动端步骤条的设置。
以上就是本期的全部内容啦！如何设置样式美观的步骤条，你学会了吗？
#往期推荐#
更多精彩内容，“码”上了解！↓
简约美观的移动端步骤条，你值得拥有！
本文2024-09-23 00:39:56发表“云苍穹知识”栏目。
本文链接：https://wenku.my7c.com/article/kingdee-cangqiong-140941.html
