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

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

構(gòu)成元件

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

添加交互

接下來，我們需要為圓添加交互，使其可以水平拖動。具體步驟如下：

1. 選擇圓，并在“交互”選項卡中選擇“移動”。

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

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

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

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

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

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

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

效果圖

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

總結(jié)

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