本期教學為實現【58租房】小程序中租金區間滑動篩選的交互細節，一起來看看~

效果預覽：

一、交互邏輯分析

1、滑動左右兩個滑塊，可以動態調節價格區間；

2、區間價格為整數，且為100的倍數；

3、當【右滑塊】為最右邊時，無論怎么滑動【左滑塊】，最高價格文案仍為“不限”；

4、當【右滑塊】不在最右邊時，滑動左右兩個滑塊，最低和最高價格文案跟著動態變化；

5、邊界問題：【左滑塊】滑動區間為灰色矩形的左端點至右滑塊左端點，【右滑塊】滑動區間為左滑塊右端點至灰色矩形右端點；

二、界面元件搭建

1、拉入兩個圓形，大小設為30*30，分別命名為左、右，再將其轉為動態面板，分別命名為：左滑塊、右滑塊；（轉為動態面板，是因為動態面板才有“拖動”交互事件）

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

3、再拉入一個文本標簽，作為價格區間的文案展示，初始文案為：￥0元 — 不限；

4、排版細節：此教程滑動的距離計算以【滑動的中心點】為參考坐標，所以，左右滑塊的中心點位置，需要分別對齊底部背景矩形的左右兩邊的端點。

如下：

三、交互事件實現

1、選中“左滑塊”，添加一個空的【鼠標單擊時】事件。（目的是，讓鼠標移動到滑塊時，有手指效果）

2、再添加【拖動時】，滑塊的移動事件：

元件 》移動 》勾選【當前元件】，移動為【水平拖動】。

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

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

3、設置【高亮】矩形的尺寸

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

特別需要注意其變化的錨點為：右側。

4、設置【價格區間】文案

元件 》 設置文本 》勾選【價格區間】，其文本值為：￥[[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. 函數Math.floor為取整函數。
2. 上述公式最低值的邏輯為，左滑塊中心點到背景矩形左端點的距離，再除以背景矩形的寬度，得到比例。因為數值為整數，且為100的倍數，假設最高值為10000，即可乘以100，用函數取整，先得到100以內的整數，再乘以100，得到100的倍數。
3. 同理，最高值的邏輯為，右滑塊的中心點到背景矩形左端點的距離，再除以背景矩形的寬度，得到比例，乘以100，再用函數取整，再乘以100，得到100的倍數。

5、最后，添加判斷條件

if “[[LVAR1.x+LVAR1.width/2]]” < “[[LVAR1.right]]”，其中，左邊LVAR1為右滑塊，右邊LVAR1為背景矩形。即當右滑塊中心點位置在背景矩形的左端點時。

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

其中，滑塊的移動，高亮矩形的尺寸公式一致，直接復制即可。

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

詳細交互事件如下圖所示：

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

詳細交互事件如下如所示：

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

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

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

設置【價格區間】文案：

1）當【右滑塊】中心點位于【背景】矩形的右側時，文案為：

￥[[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為背景矩形。

四、預覽效果

案例效果：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議