Axure怎么设计点赞的百分比进度条?
我要评论在投票类的网页中，点击“支持”按键后，不仅增加“被支持”一方的“投票”数量，还显示“投票”比例，该怎么制作这类的网页呢？具体效果图如下，详细操作请看下文详细介绍。
“进度条”的基本制作原理，可先参考以下链接，是个基础，这里不再累述部分代码原理~
在axure中，按以下图示，设置组件布局：
先设置”按键1“的交互动作：
动作1：
设置”参数1“的数值，即点击“支持”后，数值加1
设置"参数1"的“元件文字”为局部变量LVAR1
所以”参数1“的数值为：[[LVAR1+1]]
动作2：
1.触发"颜色进度条1"的"载入时"动作
2.触发"颜色进度条2"的"载入时"动作
然后看下“颜色进度条1”的“载入时”的交互动作：
动作1：
设置”总量1“的内容，即“进度条1”的比率数值，这是一个临时的过渡数值
设置"参数1"的“元件文字”为局部变量LVAR1
设置"参数2"的“元件文字”为局部变量LVAR2
所以所需的”比率数值“的公式为：[[LVAR1/(LVAR1+LVAR2)*100]]
（*100是为了百分比格式化方便些）
动作2：
设置”颜色进度条2“的宽度
设置"总量1"的“元件”为局部变量LVAR1
所以”颜色进度条2“的宽度为：[[LVAR1.text*LVAR1.width/100]]
（/100是抵消百分比扩大的数额）
动作3：
设置”百分比1“的内容，这个数值需要格式化（保留2为小数）
设置"总量1"的“元件文字”为局部变量LVAR1
所以”百分比1“的格式化后的内容：（[[LVAR1.toFixed(2)]]%）
”按键2“及”颜色进度条2“的交互方式与”按键2“及”颜色进度条2“的交互相同，这里不再累述，可以通过复制代码的方式便捷操作，需要注意的时，参数的赋值需要修正~
”按键2“的交互代码：
”颜色进度条2“的交互代码：
到这里就设置结束了，设置还算简单……
一切设置正确，效果就如下：
以上就是Axure设计点赞的百分比进度条的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
相关文章
axure网页原型怎么预览和生成原型文件？axure中设计好的文件原型想要预览并生成，该怎么预览呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-09-25
axure原型无法签出怎么办? axure不能签出的解决办法
axure原型无法签出怎么办、？axure中设计网页原型很方便，设计完成以后发现无法签出，该怎么办呢？下面我们就来看看axure不能签出的解决办法，需要的朋友可以参考下2017-09-24
Axure怎么新建元件库？想要把常用的组件制作一个元件，放到自己的元件库中，该怎么操作呢？下面我们就来看看Axure元件库的使用方法，需要的朋友可以参考下2017-09-13
axure中的单元格怎么合并？axure制作的网页原型中插入了表格，想要将表格中的单元格合并呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-09-08
axure8怎么给网页制作Tabpage页效果？axure8中想要给网页设计一个tab标签效果，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-08-29
Axure RP8怎么设计倒计时获取短信验证码效果？经常能见到带有短信验证的网页，该怎么设计出这个交互效果呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-08-25
Axure RP怎么给网页添加滚动字幕？看到很多网页有滚动字幕，想要在Axure RP中制作滚动字幕效果，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-08-15
Axure RP怎么设计一款导航菜单？Axure RP中设计网页的时候需要设计一款导航菜单，该怎么设计恩？下面我们就来看看详细的教程，需要的朋友可以参考下2017-08-11
axure怎么给下拉框/列表框和元件文本添加内容？axure中有很多元件，今天我们就来看看给下拉框/列表框和元件文本添加内容的方法，需要的朋友可以参考下2017-07-25
Axure怎么绘制一幅生产产品图？Axure中想要设计一个生产产品图，该怎么设置呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下2017-07-25
最新评论