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

步骤条是一种常见的导航形式,在各种流程处理中随处可见,例如重置密码,网购流程等等。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的条件下。

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

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

时间: 2024-11-10 20:58:38

使用ivx步骤条容器的经验总结的相关文章

纯css写的步骤条

步骤条很常见,但是网上很多都不太智能,不适合放在手机上的步骤条,应一位朋友的求帮忙,故写了一个可以加任意多个步骤,宽度仍然等比,超过屏幕还可以滑动的步骤条ui.具体展示如下: 于若需要请移步我的github,按照自己的需求自行修改.其中横向滑动可以参加另外一篇文章 :css如何实现滚动条隐藏但鼠标仍然可以滚动

微信小程序 - 步骤条组件

<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> <steps uncolor="#ccc" type="detail" active="0" data="{{basicsList}}" /> 点击下载:示例 原文地址:https://www.cnblogs.com/c

进度条,步骤条,

1,记录一次步骤条来实现人数不同显示的进度不同 效果如图: 废话不多说 上代码: html文件: <div class="gift"> <p class="prenum">已有 <countTo :startVal='0' :endVal='userNums' :duration='3000'/> 位武魂使共赴苍岚</p> <div class="bg_range"> <div c

WPF-自定义实现步骤条控件

原文:WPF-自定义实现步骤条控件 步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthConverter x:Key="StepListStepWidthConverter" /> <ControlTemplate x:Key="NormalItemTemplate" TargetType="List

使用ivx中表格组件的经验总结

之前讲过了使用ivx在案例中如何使用图表组件更直观的展示数据,不过还有另一种展示数据也常用到的手段--表格.ivx中也对这一功能制作了对应的表格组件,今天就来说说这个表格组件是如何使用的.1.表格的数据来源表格和for循环创建一样需要有数据来源,而且多是对象数组(嗯,反正我就是喜欢对象数组).可以看到第一行除了第一列后面几个的元素都是 "left "(注意前后都是各两个下划线),这个是用于合并两个相邻表格的,而且把left换成right,up,down也都是可以的.2.内部框和选中框表

进度步骤条

效果图 页面 html部分 <body class="bodybg padding20"> <div id="steps" ></div> <div id="page" class="bgWhite padding20"></div> <div class="step-button text-center marginTop20" >

使用ivx中富文本组件的经验总结

富文本相比普通文本可以显示复杂的字体样式和排版方式,所以更适用于网页图文内容的排版,在很多案例中都会经常使用.ivx中也封装好了富文本组件和富文本编辑器组件,今天就说一下这两个组件该如何使用吧. 一.富文本和富文本编辑器富文本编辑器是一种可内嵌于浏览器,用于编辑富文本内容和格式的文本编辑器.它与富文本的区别是,前者仅容许在案例编辑状态下进行内容编辑,在非编辑状态下隐藏文本工具条,通常仅做展示,不与用户发生交互.后者则在案例非编辑状态下开放富文本编辑界面,容许用户进行富文本的排版和编辑.富文本组件

使用ivx实现批量上传图片的经验总结

通常我们使用上传图片都是上传单张,在ivx中其实也提供了批量上传图片的功能,今天就讲一下批量上传图片的具体操作.1.图片列表首先需要用一个对象数组存储批量上传的图片,然后用for容器循环创建一个图片列表.每个图片后面都有一个圆框关闭的图标,可以将当前数据从对象数组中删除,当然这里的删除只是从前台的对象数组中删除.2批量上传图片然后就是图片上传的部分,这里使用的是文件接口组件读取多张本地图片的动作,我们可以在该动作的回调中获取到参数"读取结果",它包含图片列表和读取失败原因两个部分,如果

使用ivx实现简易计算器的经验总结

今天要讲的是利用ivx制作一个能够进行简单加减乘除运算的计算器,设计思路是将整个输入的运算式保存到一个文本变量中,通过eval()直接方法计算文本变量中表达式的值,下面说一下具体步骤.1.计数器界面的上面用于显示输入的计算式和计算结果,下面使用文本组件展示16个按键,这16个键可以分为四类,数字键,运算符键,等于键,清零键.其中按钮键和运算符键它们同类按键的操作都是类似的,我们可以写成一个动作组,点击按键时调用动作组并将按键的文本组件内容传给动作组即可.2.数字键点击数字键时,只需使用拼接字符串