本期教學(xué)為實(shí)現(xiàn)【58租房】小程序中租金區(qū)間滑動(dòng)篩選的交互細(xì)節(jié)，一起來(lái)看看~

效果預(yù)覽：

一、交互邏輯分析

1、滑動(dòng)左右兩個(gè)滑塊，可以動(dòng)態(tài)調(diào)節(jié)價(jià)格區(qū)間；

2、區(qū)間價(jià)格為整數(shù)，且為100的倍數(shù)；

3、當(dāng)【右滑塊】為最右邊時(shí)，無(wú)論怎么滑動(dòng)【左滑塊】，最高價(jià)格文案仍為“不限”；

4、當(dāng)【右滑塊】不在最右邊時(shí)，滑動(dòng)左右兩個(gè)滑塊，最低和最高價(jià)格文案跟著動(dòng)態(tài)變化；

5、邊界問(wèn)題：【左滑塊】滑動(dòng)區(qū)間為灰色矩形的左端點(diǎn)至右滑塊左端點(diǎn)，【右滑塊】滑動(dòng)區(qū)間為左滑塊右端點(diǎn)至灰色矩形右端點(diǎn)；

二、界面元件搭建

1、拉入兩個(gè)圓形，大小設(shè)為30*30，分別命名為左、右，再將其轉(zhuǎn)為動(dòng)態(tài)面板，分別命名為：左滑塊、右滑塊；（轉(zhuǎn)為動(dòng)態(tài)面板，是因?yàn)閯?dòng)態(tài)面板才有“拖動(dòng)”交互事件）

2、拉入兩個(gè)矩形，寬高都一致，一個(gè)命名為“背景”，填充色為灰色。另一個(gè)命名為“高亮”，填充色為紅色；

3、再拉入一個(gè)文本標(biāo)簽，作為價(jià)格區(qū)間的文案展示，初始文案為：￥0元 — 不限；

4、排版細(xì)節(jié)：此教程滑動(dòng)的距離計(jì)算以【滑動(dòng)的中心點(diǎn)】為參考坐標(biāo)，所以，左右滑塊的中心點(diǎn)位置，需要分別對(duì)齊底部背景矩形的左右兩邊的端點(diǎn)。

如下：

三、交互事件實(shí)現(xiàn)

1、選中“左滑塊”，添加一個(gè)空的【鼠標(biāo)單擊時(shí)】事件。（目的是，讓鼠標(biāo)移動(dòng)到滑塊時(shí)，有手指效果）

2、再添加【拖動(dòng)時(shí)】，滑塊的移動(dòng)事件：

元件 》移動(dòng) 》勾選【當(dāng)前元件】，移動(dòng)為【水平拖動(dòng)】。

為了防止滑塊拖出矩形的兩端，還需要添加邊界。其左右邊界如下：

• 左側(cè)?≥[[LVAR1.left-This.width/2]]，其中LVAR1為元件【背景】，This為滑塊本身；
• 右側(cè) ≤[[LVAR1.x]]，其中LVAR1為元件【右滑塊】；

3、設(shè)置【高亮】矩形的尺寸

元件 》設(shè)置尺寸 ，勾選【高亮】矩形，寬設(shè)置為：[[LVAR1.x-This.x]]，其中LVAR1為右滑塊，This為左滑塊。即寬度尺寸為左右兩個(gè)滑塊的距離。

特別需要注意其變化的錨點(diǎn)為：右側(cè)。

4、設(shè)置【價(jià)格區(qū)間】文案

元件 》 設(shè)置文本 》勾選【價(jià)格區(qū)間】，其文本值為：￥[[Math.floor((This.x+This.width/2-LVAR2.x)/LVAR2.width*100)*100]]元 — ￥[[Math.floor((LVAR1.x+LVAR1.width/2-LVAR2.x)/LVAR2.width*100)*100]]元 。其中，LVAR1為右滑塊，LVAR2為背景矩形。

溫馨提示：

1. 函數(shù)Math.floor為取整函數(shù)。
2. 上述公式最低值的邏輯為，左滑塊中心點(diǎn)到背景矩形左端點(diǎn)的距離，再除以背景矩形的寬度，得到比例。因?yàn)閿?shù)值為整數(shù)，且為100的倍數(shù)，假設(shè)最高值為10000，即可乘以100，用函數(shù)取整，先得到100以內(nèi)的整數(shù)，再乘以100，得到100的倍數(shù)。
3. 同理，最高值的邏輯為，右滑塊的中心點(diǎn)到背景矩形左端點(diǎn)的距離，再除以背景矩形的寬度，得到比例，乘以100，再用函數(shù)取整，再乘以100，得到100的倍數(shù)。

5、最后，添加判斷條件

if “[[LVAR1.x+LVAR1.width/2]]” < “[[LVAR1.right]]”，其中，左邊LVAR1為右滑塊，右邊LVAR1為背景矩形。即當(dāng)右滑塊中心點(diǎn)位置在背景矩形的左端點(diǎn)時(shí)。

6、添加另一個(gè)條件交互事件（即右滑塊中心點(diǎn)位置正好位于背景矩形的左端點(diǎn)。）

其中，滑塊的移動(dòng)，高亮矩形的尺寸公式一致，直接復(fù)制即可。

【價(jià)格區(qū)間】的文案變化為：￥[[Math.floor((This.x+This.width/2-LVAR2.x)/LVAR2.width*100)*100]]元 — 不限，其中，LVAR2為背景矩形。

詳細(xì)交互事件如下圖所示：

7、同理，我們可以得到右滑塊的交互事件，其實(shí)現(xiàn)邏輯與左滑塊相似

詳細(xì)交互事件如下如所示：

其中，右滑塊的左右邊界如下：

• 左側(cè)?≥[[LVAR1.right]]，其中LVAR1為元件【左滑塊】；
• 右側(cè) ≤[[LVAR1.right+This.width/2]]，其中LVAR1為元件【背景】矩形；

高亮矩形的尺寸：[[This.x-LVAR1.x]]，其中This為右滑塊，LVAR1為左滑塊。即寬度尺寸為左右兩個(gè)滑塊的距離。

設(shè)置【價(jià)格區(qū)間】文案：

1）當(dāng)【右滑塊】中心點(diǎn)位于【背景】矩形的右側(cè)時(shí)，文案為：

￥[[Math.floor((LVAR1.x+LVAR1.width/2-LVAR2.x)/LVAR2.width*100)*100]]元 — ￥[[Math.floor((This.x+This.width/2-LVAR2.x)/LVAR2.width*100)*100]]元。其中，LVAR1為左滑塊，LVAR2為背景矩形。

2）否則，文案為：

￥[[Math.floor((LVAR1.x+LVAR1.width/2-LVAR2.x)/LVAR2.width*100)*100]]元 — 不限。其中，LVAR1為左滑塊，LVAR2為背景矩形。

四、預(yù)覽效果

案例效果：

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

題圖來(lái)自Unsplash，基于CC0協(xié)議