本文將利用一些小技巧，實(shí)現(xiàn)從1到100，以及可以在文字上方正?；瑒?dòng)，不再當(dāng)心滑塊在文本上方時(shí)，受文本框影響導(dǎo)致不好滑動(dòng)。

預(yù)覽地址：https://ws8zsg.axshare.com

一、準(zhǔn)備階段

先制作一個(gè)335*36的矩形（命名為：分母），將矩形的4個(gè)角的圓角設(shè)置為18；

在矩形分母上方，制作一個(gè)100*36的矩形（命名為：分子），矩形分子左側(cè)的兩個(gè)圓角設(shè)置為18，將其顏色改為藍(lán)色，并增加1像素的邊框效果（如圖）；

注意：這里的邊框效果選色時(shí)最好是純色，不設(shè)置透明度的。不然之后會(huì)出現(xiàn)一些無法解釋的后果（壞笑一下）。

因?yàn)樾枰蟿?dòng)，那我們這邊增加一個(gè)拖動(dòng)的載體：制作一個(gè)36*36的圓，去掉邊框；為了后續(xù)看到的圓會(huì)更立體些，可以增加移量為0*0、范圍為5的投影效果；

差點(diǎn)忘記了，還需要在最上方增加一個(gè)表單元件中的文本框，將該元件禁用后，把其元件樣式改為文本段落（如圖），刪除系統(tǒng)默認(rèn)的交互樣式，并將字體的對齊方式改為居中（為啥要將元件的樣式改為文本段落，這個(gè)在之后講解交互的時(shí)候再透露）；

準(zhǔn)備工作已經(jīng)完成了，接下來就該開始設(shè)計(jì)交互效果了。

二、交互設(shè)計(jì)

在預(yù)覽的地址中，可以看到滑塊需要跟隨移動(dòng)。所以我們需要選中圓，然后鼠標(biāo)右擊，將其轉(zhuǎn)換為動(dòng)態(tài)面板，并在交互中選擇【拖動(dòng)時(shí)】的交互：

• 拖動(dòng)時(shí)，我們需要水平移動(dòng)圓的位置，設(shè)置動(dòng)態(tài)面板跟隨水平移動(dòng)；
• 因?yàn)槲覀冃枰獔A在分母的范圍內(nèi)進(jìn)行移動(dòng)，那再給圓設(shè)置一個(gè)左右的限制。左側(cè)：需大于等于分母的左邊位置；右側(cè)：需要小于等于分母的右邊位置（如圖）；

左側(cè)函數(shù)：[[LVAR1.left]] ；右側(cè)函數(shù)：[[LVAR1.right]]。其中“LVAR1”為局部變量，指代分母（如圖）；

移動(dòng)的效果已經(jīng)設(shè)置完成了，接下來需要讓分子跟隨圓移動(dòng)的距離，改變長度。給動(dòng)態(tài)面板增加設(shè)置分子尺寸的動(dòng)作；

• 先要知道圓具體移動(dòng)的多少距離要怎么算，需要有個(gè)靜態(tài)的參照物，而滑動(dòng)條中唯一是靜態(tài)的就只有分母了，所以我們需要使用圓移動(dòng)后的 X 坐標(biāo)減去分母的 X 坐標(biāo)，這就獲得了偏移量（如圖），x軸的函數(shù)為：[[This.x-LVAR1.x+18]] ；
• Y軸由于沒有變化，這里就直接使用了分子原來的高度36，錨點(diǎn)可以是左上或者左側(cè)都可以；

前面有提到，不要給分子的描邊顏色增加透明度，是因?yàn)樵黾油该鞫群?，在你移?dòng)后，分子的樣式會(huì)發(fā)生變形，至于原因，我也不知道，這只是我踩到的坑。

接下來，我們需要對文本的內(nèi)容進(jìn)行設(shè)置了，給動(dòng)態(tài)面板再增加一個(gè)設(shè)置文本的動(dòng)作：

• 數(shù)值占比，具體計(jì)算：用分子的寬度 除以 分母的寬度，再乘以100，然后取整；所以我們這里需要用到取整的函數(shù) toFixed(decimalPoints) （如圖）；

• 設(shè)置局部變量“LVAR1” 為分子，“LAVR2”為分母；整體的函數(shù)為：[[((LVAR1.width-18)/(LVAR2.width-36)*100).toFixed(decimalPoints)]]（如圖）；

再注意一個(gè)細(xì)節(jié)：我的分子位置就到圓形的一半，如果要是和圓形右對齊的話，在縮到最右側(cè)的時(shí)候，分子也是會(huì)出現(xiàn)變形，所以我這邊在計(jì)算時(shí)，需要將分子的長度減去18，分母的寬度減去36；

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

到這一步就可以算是完成了滑動(dòng)條的設(shè)計(jì)了，可以先預(yù)覽下效果，但你可能會(huì)發(fā)現(xiàn)停留在文字上方的時(shí)候，就會(huì)變得特別難拖動(dòng)了，別急，還有兩個(gè)步驟；

三、優(yōu)化升級

前面之所以使用表單元件文本框，是因?yàn)槲谋究蚩梢栽O(shè)置一個(gè)文本改變時(shí)的交互動(dòng)作，你預(yù)覽現(xiàn)在的效果，能看到數(shù)值是從0到100；

所以這里需要給文本框增加一個(gè)交互效果：文本改變時(shí)，將內(nèi)容設(shè)置為數(shù)值：1（如圖）；

這里需要增加一個(gè)判斷條件，就是當(dāng)數(shù)值等于0的時(shí)候，我們需要將數(shù)值強(qiáng)行設(shè)置為1；

最后，將素材全選后，鼠標(biāo)右鍵將其轉(zhuǎn)換為動(dòng)態(tài)面板，再為動(dòng)態(tài)面板增加拖動(dòng)時(shí)的交互，動(dòng)作設(shè)置為觸發(fā)動(dòng)態(tài)面板1的拖動(dòng)效果，就有了原型預(yù)覽里體驗(yàn)到的效果了（如圖）。