2021-05-17

开发工具与关键技术： Axure原型

作者：巢武辉

撰写时间：2021/5/18

注意看红色的线和箭头，共有4个步骤，按顺序操作下去

首先要准备3个元件，中间的文字取名叫百分比，下面的线叫进度条，大矩形叫做框

先找到上面菜单的“对齐”如图所示然后将框和进度条进行（上下居中和左对齐），进度条的高度和框的高度 进度条宽为1是一样的把线宽取消选择None或者把线段颜色取消 最后填充颜色

选中进度条到“更多事件“找到载入时

第一步在动作里面找到设置尺寸，第二步选择到进度条，第三步设置锚点为左侧 动画选择线性

第四步我们设置宽所对应的变量和函数FX

 

然后添加一个局部变量 选择元件 选择框

然后再次点击插入变量或函数…把原有的[[This.width]]该为[[LVAR1.width]]

然后点击确定

首先，先隐藏百分比

选中百分比到“更多事件“找到载入时

然后在动作里面找到显示把“百分比”勾上 然后在点击确定

在选中百分比在用例里面找到显示时如果没有显示时到更多事件里面找

第一步在动作到设置文本第二步选择你要配置动作的元件勾上第三步点击FX设置变量和函数

首先把百分比删掉   然后添加两个局部变量在插入函数或量...

找到如箭头所示的函数floor(x)

第一步改为元件第二步选择到进度条和框两个元件如图所示

第三步将变量和函数中的函数改为[Math.floor()]]

[[Math.floor(LVAR1.width/LVAR2.width*100)]]％

这段话的意思是进度条的宽度/框的宽度在*100％

然后点击确定

然后在分别设置等待0毫秒隐藏百分比显示百分比即可

以上是我所知道的进度条的做法有什么做的不对的地方请大家指教

欢迎评论区留言