本案例制作一個(gè)可拖動(dòng)的條形進(jìn)度條，同時(shí)可以顯示當(dāng)前位置的百分比。一起來(lái)看看~

實(shí)現(xiàn)效果：

• 自由拖動(dòng)進(jìn)度條
• 記錄當(dāng)前進(jìn)度條的百分比
• 順便記錄下你的顏值

實(shí)現(xiàn)邏輯

this.right函數(shù)：當(dāng)前元件最右側(cè)的橫坐標(biāo)。

LVAR.toFixed（decimalPoints）函數(shù)：用于選取保留幾位小數(shù)，LVER為所選值，decimalPoints數(shù)字，例如 5.toFixed(2)是指5.00 。

100除以進(jìn)度條的長(zhǎng)度就等于每拖動(dòng)進(jìn)度條單位長(zhǎng)度時(shí)對(duì)應(yīng)的百分比數(shù)值。

交互步驟

Step one

準(zhǔn)備素材：需要一個(gè)進(jìn)度條框，一個(gè)用戶控制顯示范圍的動(dòng)態(tài)面板，一個(gè)進(jìn)度條，一個(gè)用戶拖動(dòng)進(jìn)度條的動(dòng)態(tài)面板，和一個(gè)顯示百分比的顯示框。

如圖所示：

Step two

進(jìn)度條長(zhǎng)度為475，將進(jìn)度條轉(zhuǎn)換為動(dòng)態(tài)面板，動(dòng)態(tài)面板取名為進(jìn)度條，放置在橫坐標(biāo)為-450的位置。將進(jìn)度條范圍框放置在橫坐標(biāo)為0的位置。

創(chuàng)建動(dòng)態(tài)面板“進(jìn)度條范圍”，將進(jìn)度條動(dòng)態(tài)面板和進(jìn)度條顯示框都放在動(dòng)態(tài)面板內(nèi)。（這里注意，需要將進(jìn)度條范圍動(dòng)態(tài)面板取消勾選自適應(yīng)內(nèi)容）

將百分比顯示框放在合適的位置，隱藏邊框線。

ok，準(zhǔn)備工作基本完成。

Step three

下一步，是設(shè)置交互，本案例交互非常短。

選中進(jìn)度條動(dòng)態(tài)面板：

拖動(dòng)時(shí)：

設(shè)置移動(dòng)

• 進(jìn)度條水平移動(dòng)
• 邊界Right≤425，Left≥-450

設(shè)置文本

百分比顯示框?yàn)閇[((This.right-25)/4).toFixed(0)]] %

OK，完成啦?。ń忉屛谋究虻暮瘮?shù)：意思是將進(jìn)度條框長(zhǎng)度為425，進(jìn)度條初始位置占去了25，剩下的距離為進(jìn)度條可移動(dòng)距離為400，進(jìn)度條每移動(dòng)一個(gè)單位，那么對(duì)應(yīng)的百分比就是0.25，即1/4。因此(This.right-25)/4就等于進(jìn)度條當(dāng)前位置占全部距離的百分比，再利用取小數(shù)點(diǎn)后0位，就可以得到當(dāng)前進(jìn)度條位置的整數(shù)百分比）

最后

最后，大家只要復(fù)制剛才做的交互，同時(shí)寫上對(duì)應(yīng)的能力值，就可以做到本案例的效果啦。

依然鄭重提醒大家，本教程只能用Axure RP 9 及以上版本打開，堅(jiān)持使用Axure RP 9的原因很簡(jiǎn)單，就是想與時(shí)俱進(jìn)，擁抱變化，適應(yīng)未來(lái)。

最后，原型下載鏈接：https://pan.baidu.com/s/1psd4tDC0FmgICeq7Wyvdxw

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議