如何通過拖動滑桿上的按鈕，調(diào)整數(shù)值？

這種部件常見于調(diào)節(jié)音量大小、色彩值等數(shù)值類型的設(shè)置。我們來分解一下部件構(gòu)成，看看如何實現(xiàn)。

點擊這里查看在線演示

1、部件分解

這樣的部件主要由三個部分組成，一個滑桿軌道，一個用來調(diào)節(jié)的按鈕，還有一個是什么呢？對了就是拖動的進度，因為axure里的部件不支持設(shè)置部分填充，所以這里會用另一個大小相同的軌道，通過設(shè)置不同的填充顏色來表示當(dāng)前拖動的進度。

2、動態(tài)面板的應(yīng)用

這里使用動態(tài)面板是為了應(yīng)用它的“Fit to Content”（適應(yīng)內(nèi)容）屬性，這個屬性在應(yīng)用之后，動態(tài)面板中的內(nèi)容只會在指定大小范圍內(nèi)顯示，其它區(qū)域不可見。

考慮到拖動的進度最大是軌道長度，最小為0，而為了隱藏在進度小100時的部分，需要將動態(tài)面板的“Fit to Content”（適應(yīng)內(nèi)容）勾選去掉，這樣在超出屏幕之外的內(nèi)容將不可見。

最終兩個動態(tài)面板初始的樣子如下：

3、設(shè)置動態(tài)面板的onDrag事件

動態(tài)面板的事件很豐富，拖動事件是其中最重要的事件之一。我們利用拖動事件，來動態(tài)顯示當(dāng)前改變值的大小，直觀顯示。

將滑桿和小按鈕轉(zhuǎn)成一個動態(tài)面板，移動到內(nèi)容的最左邊，只顯示出小按鈕，表示當(dāng)前位置在0。再將該動態(tài)面板和滑桿軌道再轉(zhuǎn)成一個外層的動態(tài)面板，注意給動態(tài)面板起個名字，便于后面選擇。

為第一個動態(tài)面板添加onDrag事件，選擇move操作，在右邊選擇該動態(tài)面板，設(shè)置為只沿x軸移動（with drag x），并且在x軸上的移動范圍：left>=-300 并且 left<=0。

4、計算進度

因為我們畫的軌道寬度并不是剛好100，可能大于或小于100，例如這個例子里，軌道寬度為300，因此我們要根據(jù)當(dāng)前被拖動的動態(tài)面板的x位置，來計算在軌道上移動的百分比。公式如下：

[[(100-Math.abs(LVAR1.x)/3).toFixed(0)]]

使用局部變量LVAR1表示動態(tài)面板，這樣好取它的x位置。計算方法為根據(jù)當(dāng)前x位置除以3（因為全長300，除以3剛好等于100），注意要用100減掉這個值，而且因為當(dāng)前位置是負值，所以這里使用了取絕對值（Math.abs(值)）的方法去掉負號，最后結(jié)果取整(toFixed(0)表示小數(shù)位為0，即沒有小數(shù))。

5、完成

到這里滑桿調(diào)值基本完成了。

知道大致思路后，就可拓展做成你想要的原型效果了，這就要看你的需要啦！

本文由 @Axure原型設(shè)計工場?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。