隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，越來(lái)越多的網(wǎng)站和應(yīng)用程序需要展示進(jìn)度條或者滑塊，以便用戶可以清晰地了解任務(wù)的完成情況。本文將介紹如何使用Axure這個(gè)軟件創(chuàng)建一個(gè)簡(jiǎn)單的橫向滑塊，讓你輕松實(shí)現(xiàn)進(jìn)度條功能。構(gòu)成

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，越來(lái)越多的網(wǎng)站和應(yīng)用程序需要展示進(jìn)度條或者滑塊，以便用戶可以清晰地了解任務(wù)的完成情況。本文將介紹如何使用Axure這個(gè)軟件創(chuàng)建一個(gè)簡(jiǎn)單的橫向滑塊，讓你輕松實(shí)現(xiàn)進(jìn)度條功能。

構(gòu)成元件

首先我們需要構(gòu)建三個(gè)元素：背景條、進(jìn)度條和圓。其中，圓是動(dòng)態(tài)面板，填充深藍(lán)色，而進(jìn)度條置于最底層，圓置于最上層，背景條在中間。它們的布局如下圖所示：

添加交互

接下來(lái)，我們需要為圓添加交互，使其可以水平拖動(dòng)。具體步驟如下：

1. 選擇圓，并在“交互”選項(xiàng)卡中選擇“移動(dòng)”。

2. 設(shè)置拖動(dòng)邊界，左側(cè)大于等于0，右側(cè)小于等于背景的長(zhǎng)度。這一步是讓這個(gè)圓圈在背景條上可以拖動(dòng)起來(lái)。

3. 第一交互中的插入函數(shù)編輯值。

設(shè)置進(jìn)度條尺寸

接下來(lái)，我們需要設(shè)置進(jìn)度條的尺寸，寬度為：[[yuan.x yuan.width]], 注意要添加局部變量“圓指的是動(dòng)態(tài)面板圓圈。錨點(diǎn)在左側(cè)?！边@一步是讓進(jìn)度條跟著動(dòng)起來(lái)。

設(shè)置圓形上的元件文字

然后，我們需要設(shè)置圓形上的元件文字，公式計(jì)算的是當(dāng)前位置的百分比。由于本身有30寬，所以計(jì)算百分比的時(shí)候分子分母都需要減去30。Math.floor()是向下取整，也就是把小數(shù)點(diǎn)后面的數(shù)字抹掉，不然算出來(lái)會(huì)有長(zhǎng)尾巴。

第三交互中的插入函數(shù)編輯值。

效果圖

最后，我們的橫向滑塊就完成了，效果圖如下所示：

總結(jié)

通過(guò)以上步驟，我們使用Axure這個(gè)軟件成功創(chuàng)建了一個(gè)簡(jiǎn)單的現(xiàn)實(shí)進(jìn)度的橫向滑塊。雖然這個(gè)過(guò)程可能對(duì)新手來(lái)說(shuō)有些困難，但是只要按照步驟逐步操作，相信大家都能輕松實(shí)現(xiàn)進(jìn)度條功能。