1.繪制基本原件

（1）在滑動塊中一共由三部分組成：

• 滑動的按鈕
• 左側(cè)隨滑塊變化的進(jìn)度條
• 右側(cè)逐漸減少的進(jìn)度條。

先創(chuàng)建這三個(gè)組件：

按鈕套入動態(tài)面板中，命名為“button”，左側(cè)增加的進(jìn)度也套入動態(tài)面板中，命名為“plan”，底色不用動態(tài)面板直接命名為“base”。

（2）添加滑動效果

縮短“plan”面板的長度（注意：面板內(nèi)的矩形長度不改變），原件從上向下順序依次是“button”“plan”“base”。

然后，我們對滑塊“button”添加用例：

這里我采用的是坐標(biāo)定位，因?yàn)榛瑝K是橫向滑動，所以設(shè)置X軸坐標(biāo)的變化。（用TotaldrapX函數(shù)時(shí)來回快速拖會有bug，而這樣不會）

思路：計(jì)算出滑塊“button”在X軸拖動的距離來改變動態(tài)面板“plan”的長度。

完成這一步，就可以左右滑動來設(shè)置進(jìn)度了。

2.設(shè)置拖動滑塊顯示進(jìn)度的值

這里我們添加一個(gè)顯示數(shù)值的文本框，命名為“number”，為了美觀把邊框隱藏了。

接著之前的步驟再添加一個(gè)拖動“button”改變“number”文本框數(shù)值的用例。在之前用的是坐標(biāo)定位，這里我用了原件寬度的函數(shù)來定位，這樣看起來麻煩一些，但是有利于之后的調(diào)整。（也可以直接寫寬度的數(shù)值）

不要被這一大坨唬住了，一點(diǎn)一點(diǎn)看：

• LVAR1.width/(LVAR2.width-30) 這一段是計(jì)算“plan”在“base”長度上的占比，因?yàn)椤癰utton”本身有寬度，所以減去30；
• toFixed(2)函數(shù)是固定小數(shù)點(diǎn)后保留兩位；100和后面的%抵消，將小數(shù)轉(zhuǎn)化為百分?jǐn)?shù)。

到這一步，在瀏覽器中就可以拖動滑塊，顯示比例了。

3.拖動滑塊設(shè)置日期

如果僅僅是拖動滑塊來改變百分比，這個(gè)小元件實(shí)在沒什么意思，但是在很多情況下可以拖動滑塊了設(shè)置時(shí)間。比如在眾籌的產(chǎn)品內(nèi)，發(fā)布項(xiàng)目時(shí)需要設(shè)置籌款周期，這個(gè)原件就派上用場了。我們繼續(xù)往下看：

將剛才的樣式稍微修改一下：

然后將用例修改一下：

這里我設(shè)置本月天數(shù)為31天，如果想要通過判定來獲取某月的天數(shù)可以參考上學(xué)時(shí)做的判斷某一年是否是閏年的思路。

math.ceil()函數(shù)是向上取整，及滑動到15.5天時(shí)顯示為16天。

然后添加日期，依次添加三個(gè)文本框，命名為“year”“month”“date”，方便之后的賦值：

給文本框賦初值，獲取本地時(shí)間：

給“button”添加用例，拖動時(shí)設(shè)置“date”文本框的值為今天的日期now.getdate（）加上“number”的數(shù)值

但是這樣有一個(gè)問題就是，超過31天之后應(yīng)該是往月份進(jìn)1的，沒關(guān)系，繼續(xù)看：

我們?yōu)槲谋究颉癲ate”添加用例，當(dāng)文本改變時(shí)：

思路：當(dāng)日期大于31時(shí)間去31，月份加1。

是不是到這里就完了呢？不是的，如果這樣就結(jié)束的話向右拖之后再向左往回拖，月份可不會自己變回去哦~

所以我們繼續(xù)在“date”文本框下添加用例：

思路：日期的值大于今天的日期&&小于等于31時(shí) 說明月份的值是本月。

就這樣大功告成~~~233333，歡迎小伙伴們告訴我更多更簡便的方法~

下載鏈接: http://pan.baidu.com/s/1migy00w 密碼: sb2c

作者：浩程君（微信號HAO_chengjun），歡迎交流。

本文由 @浩程君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。