教程租房小程序价格区间交互教学
⇨⇦
本期教学为实现【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为背景矩形。
温馨提示：
函数Math.floor为取整函数。
上述公式最低值的逻辑为，左滑块中心点到背景矩形左端点的距离，再除以背景矩形的宽度，得到比例。因为数值为整数，且为100的倍数，假设最高值为10000，即可乘以100，用函数取整，先得到100以内的整数，再乘以100，得到100的倍数。
同理，最高值的逻辑为，右滑块的中心点到背景矩形左端点的距离，再除以背景矩形的宽度，得到比例，乘以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为背景矩形。
四、预览效果
案例效果：