使用ivx步骤条容器的经验总结

时间：2020-03-25 01:12:01 阅读：94 评论：0 收藏：0 [点我收藏+]

步骤条是一种常见的导航形式，在各种流程处理中随处可见，例如重置密码，网购流程等等。ivx中已经将其封装成一个拓展组件，今天就说一说它是如何使用的吧。
技术图片

1.demo结构
demo中主要内容放在一个横幅之中，正好三个行容器划分3部分。行1是放置步骤条容器，行2则是放置两个对步骤条容器进行操作的按钮组件。steps行可以看做一个文本标注行，主要就是让步骤名称对应好下面的步骤条组件，其内部的行1，行2几个行组件都是作为文本之间的填充。
技术图片

2.步骤条
步骤条是拓展组件的一种，添加位置如下图所示。选中步骤条容器再点开拓展组件就可以在步骤条容器内添加步骤条。
技术图片

选中步骤条容器，当前步骤这个属性的值是一个数值变量，而且是从0开始的。还可以设置图标的宽高以及图标之间的大小。
技术图片

居中对齐打开的效果如下，就是给第一个步骤条之前和最后一个步骤条之后也增加了一个间距。另外也可以控制步骤条水平还是竖直显示。
技术图片

当前步骤的状态有5种，当前步骤之前的步骤即为已结束步骤，虽然也可以设置成5种不同状态，不过一般的案例逻辑选择成功比较合适。
技术图片

选中步骤条可以看到每个步骤条的属性，可以设置标题，描述文字以及图标（如果步骤条容器设置了方向垂直则标题和描述文字会出现在右侧）。每个步骤条的当前状态也都可以设置为正在等待，正在处理，出现错误，完成和成功五种状态，不过一般还是选择默认状态。
技术图片

3.使用步骤条容器的逻辑
首先要说明一点就是无论是步骤条容器还是它内部的步骤条，都是没有触发事件的，我们只能通过其他组件（例如按钮）来设置步骤条容器或者其内部步骤条的属性来改变它的显示效果。
技术图片

在demo中，步骤条容器的当前步骤绑定的是一个初始值为1的数值变量“steps”减去1的结果值，然后通过改变“steps”的值来控制步骤条容器进行到哪一步。
技术图片

当我们点击按钮“Next Step”时给数值变量“steps”加1，步骤条容器就进行到下一步，点击按钮“Bcak”，则“steps”减1，步骤容器返回到上一步。
技术图片

当进行到步骤4时我们点击“Next Step”，“steps”加1变成5，此时步骤条容器的全部步骤完成，再点击“steps”就不能再加1了并且要对用户进行提示，所以之前的对“steps”加1的动作要限制在steps=<4的条件下。
技术图片

同理，在用户处于第一步时，点击“Back”按钮，也不能再对“steps”进行减1的操作并且还要对用户进行提示。因此“steps”减1的动作限制在steps>1的条件下。
技术图片

总结
步骤条本身的使用是比较简单的，就说一说步骤条的五中状态吧。已经结束的步骤条显示状态毫无疑问应该是成功而当前步骤以后的步骤状态也毫无疑问应该是正在等待，所以最主要的就是当前步骤条的状态。如果是充值密码这类情境，每个流程时间都很短，上一个步骤成功，我们自然可以进入下一个步骤的处理中，但是如果是网购中买家发货和买家确认收货之间则有很长的间隔，这是我们就应该让当前步骤处于正在等待的状态。而比如提交审核一条信息的情境下，当我们提交完成时操作已经是结束了，但是审核的结果还是未知的，此时选择完成状态显然更加合适。当审核结果返回，再显示成功或者失败让用户进行后续的处理。最后，再补充一下如果要进行数据绑定的话五种状态的对应参数。
技术图片

使用ivx步骤条容器的经验总结

标签：color 个数方向说明 col 可见拓展动作流程

原文地址：https://blog.51cto.com/14556317/2481358

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行