Axure怎么設(shè)計(jì)點(diǎn)贊的百分比進(jìn)度條?
我要評(píng)論在投票類(lèi)的網(wǎng)頁(yè)中，點(diǎn)擊“支持”按鍵后，不僅增加“被支持”一方的“投票”數(shù)量，還顯示“投票”比例，該怎么制作這類(lèi)的網(wǎng)頁(yè)呢？具體效果圖如下，詳細(xì)操作請(qǐng)看下文詳細(xì)介紹。
Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊(cè)機(jī)+漢化包+安裝教程)
- 類(lèi)型：輔助設(shè)計(jì)
- 大?。?/span>83.2MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2019-04-26
“進(jìn)度條”的基本制作原理，可先參考以下鏈接，是個(gè)基礎(chǔ)，這里不再累述部分代碼原理~
在axure中，按以下圖示，設(shè)置組件布局：
先設(shè)置”按鍵1“的交互動(dòng)作：
動(dòng)作1：
設(shè)置”參數(shù)1“的數(shù)值，即點(diǎn)擊“支持”后，數(shù)值加1
設(shè)置"參數(shù)1"的“元件文字”為局部變量LVAR1
所以”參數(shù)1“的數(shù)值為：[[LVAR1+1]]
動(dòng)作2：
1.觸發(fā)"顏色進(jìn)度條1"的"載入時(shí)"動(dòng)作
2.觸發(fā)"顏色進(jìn)度條2"的"載入時(shí)"動(dòng)作
然后看下“顏色進(jìn)度條1”的“載入時(shí)”的交互動(dòng)作：
動(dòng)作1：
設(shè)置”總量1“的內(nèi)容，即“進(jìn)度條1”的比率數(shù)值，這是一個(gè)臨時(shí)的過(guò)渡數(shù)值
設(shè)置"參數(shù)1"的“元件文字”為局部變量LVAR1
設(shè)置"參數(shù)2"的“元件文字”為局部變量LVAR2
所以所需的”比率數(shù)值“的公式為：[[LVAR1/(LVAR1+LVAR2)*100]]
（*100是為了百分比格式化方便些）
動(dòng)作2：
設(shè)置”顏色進(jìn)度條2“的寬度
設(shè)置"總量1"的“元件”為局部變量LVAR1
所以”顏色進(jìn)度條2“的寬度為：[[LVAR1.text*LVAR1.width/100]]
（/100是抵消百分比擴(kuò)大的數(shù)額）
動(dòng)作3：
設(shè)置”百分比1“的內(nèi)容，這個(gè)數(shù)值需要格式化（保留2為小數(shù)）
設(shè)置"總量1"的“元件文字”為局部變量LVAR1
所以”百分比1“的格式化后的內(nèi)容：（[[LVAR1.toFixed(2)]]%）
”按鍵2“及”顏色進(jìn)度條2“的交互方式與”按鍵2“及”顏色進(jìn)度條2“的交互相同，這里不再累述，可以通過(guò)復(fù)制代碼的方式便捷操作，需要注意的時(shí)，參數(shù)的賦值需要修正~
”按鍵2“的交互代碼：
”顏色進(jìn)度條2“的交互代碼：
到這里就設(shè)置結(jié)束了，設(shè)置還算簡(jiǎn)單……
一切設(shè)置正確，效果就如下：
以上就是Axure設(shè)計(jì)點(diǎn)贊的百分比進(jìn)度條的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Axure怎么制作百分比的進(jìn)度條動(dòng)畫(huà)?
Axure菜單導(dǎo)航怎么添加鼠標(biāo)選中變色的特效?
相關(guān)文章
axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?
axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件？axure中設(shè)計(jì)好的文件原型想要預(yù)覽并生成，該怎么預(yù)覽呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-09-25
axure原型無(wú)法簽出怎么辦? axure不能簽出的解決辦法
axure原型無(wú)法簽出怎么辦、？axure中設(shè)計(jì)網(wǎng)頁(yè)原型很方便，設(shè)計(jì)完成以后發(fā)現(xiàn)無(wú)法簽出，該怎么辦呢？下面我們就來(lái)看看axure不能簽出的解決辦法，需要的朋友可以參考下2017-09-24
Axure怎么新建元件庫(kù)? Axure元件庫(kù)的使用方法
Axure怎么新建元件庫(kù)？想要把常用的組件制作一個(gè)元件，放到自己的元件庫(kù)中，該怎么操作呢？下面我們就來(lái)看看Axure元件庫(kù)的使用方法，需要的朋友可以參考下2017-09-13
axure中的單元格怎么合并？axure制作的網(wǎng)頁(yè)原型中插入了表格，想要將表格中的單元格合并呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-09-08
axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果?
axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果？axure8中想要給網(wǎng)頁(yè)設(shè)計(jì)一個(gè)tab標(biāo)簽效果，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-08-29
Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果?
Axure RP8怎么設(shè)計(jì)倒計(jì)時(shí)獲取短信驗(yàn)證碼效果？經(jīng)常能見(jiàn)到帶有短信驗(yàn)證的網(wǎng)頁(yè)，該怎么設(shè)計(jì)出這個(gè)交互效果呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-08-25
Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?
Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕？看到很多網(wǎng)頁(yè)有滾動(dòng)字幕，想要在Axure RP中制作滾動(dòng)字幕效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-08-15
Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?
Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單？Axure RP中設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候需要設(shè)計(jì)一款導(dǎo)航菜單，該怎么設(shè)計(jì)恩？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-08-11
axure怎么給下拉框/列表框和元件文本添加內(nèi)容?
axure怎么給下拉框/列表框和元件文本添加內(nèi)容？axure中有很多元件，今天我們就來(lái)看看給下拉框/列表框和元件文本添加內(nèi)容的方法，需要的朋友可以參考下2017-07-25
Axure怎么繪制一幅生產(chǎn)產(chǎn)品圖？Axure中想要設(shè)計(jì)一個(gè)生產(chǎn)產(chǎn)品圖，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-07-25
