昨天我們分享了一則關(guān)于Axure制作帶百分比進(jìn)度條的案例，你可以參考以下鏈接查看。今天，我們將為你展示一個(gè)更高級(jí)的進(jìn)度條案例。在這個(gè)案例中，點(diǎn)擊“支持”按鈕后，不僅會(huì)增加“被支持”方的投票數(shù)量，還會(huì)顯

昨天我們分享了一則關(guān)于Axure制作帶百分比進(jìn)度條的案例，你可以參考以下鏈接查看。今天，我們將為你展示一個(gè)更高級(jí)的進(jìn)度條案例。在這個(gè)案例中，點(diǎn)擊“支持”按鈕后，不僅會(huì)增加“被支持”方的投票數(shù)量，還會(huì)顯示投票比例，非常實(shí)用！具體效果圖如下：


1. 進(jìn)度條的基本制作原理

首先，我們來介紹一下進(jìn)度條的基本制作原理，你可以先參考以下鏈接了解基礎(chǔ)概念和部分代碼原理。

[Axure制作：帶百分比的進(jìn)度條案例](link)

2. 設(shè)置組件布局

在Axure中，按照以下圖示設(shè)置組件布局。


3. 設(shè)置按鈕交互動(dòng)作

首先，我們來設(shè)置“支持”按鈕的交互動(dòng)作。

動(dòng)作1：

- 設(shè)置“參數(shù)1”的數(shù)值，即點(diǎn)擊“支持”按鈕后，數(shù)值加1。

動(dòng)作2：

- 觸發(fā)“顏色進(jìn)度條1”的“載入時(shí)”動(dòng)作。

- 觸發(fā)“顏色進(jìn)度條2”的“載入時(shí)”動(dòng)作。

4. 設(shè)置顏色進(jìn)度條1的交互動(dòng)作

接下來，我們來看一下“顏色進(jìn)度條1”的“載入時(shí)”交互動(dòng)作。

動(dòng)作1：

- 設(shè)置“總量1”的內(nèi)容，即“進(jìn)度條1”的比率數(shù)值，這是一個(gè)臨時(shí)的過渡數(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)容為：[(2)%]

5. 設(shè)置按鈕2及顏色進(jìn)度條2的交互方式

與按鈕1及顏色進(jìn)度條1的交互方式相同，這里不再累述。你可以通過復(fù)制代碼的方式來操作，但請(qǐng)注意修正參數(shù)的賦值。

按鈕2的交互代碼：

[code]

顏色進(jìn)度條2的交互代碼：

[code]

到這里，設(shè)置就結(jié)束了。設(shè)置還算簡單，一切設(shè)置正確的話，效果如下：


如果覺得本文對(duì)你有幫助，請(qǐng)投票支持并點(diǎn)個(gè)贊哦！