AxureRP8。0教程：58租房小程序价格区间交互教学

　　本期教学为实现【58租房】小程序中租金区间滑动筛选的交互细节，一起来看看
　　效果预览：
　　一、交互逻辑分析
　　1、滑动左右两个滑块，可以动态调节价格区间；
　　2、区间价格为整数，且为100的倍数；
　　3、当【右滑块】为最右边时，无论怎么滑动【左滑块】，最高价格文案仍为“不限”；
　　4、当【右滑块】不在最右边时，滑动左右两个滑块，最低和最高价格文案跟着动态变化；
　　5、边界问题：【左滑块】滑动区间为灰色矩形的左端点至右滑块左端点，【右滑块】滑动区间为左滑块右端点至灰色矩形右端点；
　　二、界面元件搭建
　　1、拉入两个圆形，大小设为3030，分别命名为左、右，再将其转为动态面板，分别命名为：左滑块、右滑块；（转为动态面板，是因为动态面板才有“拖动”交互事件）
　　2、拉入两个矩形，宽高都一致，一个命名为“背景”，填充色为灰色。另一个命名为“高亮”，填充色为红色；
　　3、再拉入一个文本标签，作为价格区间的文案展示，初始文案为：0元不限；
　　4、排版细节：此教程滑动的距离计算以【滑动的中心点】为参考坐标，所以，左右滑块的中心点位置，需要分别对齐底部背景矩形的左右两边的端点。
　　如下：
　　三、交互事件实现
　　1、选中“左滑块”，添加一个空的【鼠标单击时】事件。（目的是，让鼠标移动到滑块时，有手指效果）
　　2、再添加【拖动时】，滑块的移动事件：
　　元件》移动》勾选【当前元件】，移动为【水平拖动】。
　　为了防止滑块拖出矩形的两端，还需要添加边界。其左右边界如下：
　　左侧〔〔LVAR1。leftThis。width2〕〕，其中LVAR1为元件【背景】，This为滑块本身；
　　右侧〔〔LVAR1。x〕〕，其中LVAR1为元件【右滑块】；
　　3、设置【高亮】矩形的尺寸
　　元件》设置尺寸，勾选【高亮】矩形，宽设置为：〔〔LVAR1。xThis。x〕〕，其中LVAR1为右滑块，This为左滑块。即宽度尺寸为左右两个滑块的距离。
　　特别需要注意其变化的锚点为：右侧。
　　4、设置【价格区间】文案
　　元件》设置文本》勾选【价格区间】，其文本值为：〔〔Math。floor（（This。xThis。width2LVAR2。x）LVAR2。width100）100〕〕元〔〔Math。floor（（LVAR1。xLVAR1。width2LVAR2。x）LVAR2。width100）100〕〕元。其中，LVAR1为右滑块，LVAR2为背景矩形。
　　温馨提示：
　　函数Math。floor为取整函数。
　　上述公式最低值的逻辑为，左滑块中心点到背景矩形左端点的距离，再除以背景矩形的宽度，得到比例。因为数值为整数，且为100的倍数，假设最高值为10000，即可乘以100，用函数取整，先得到100以内的整数，再乘以100，得到100的倍数。
　　同理，最高值的逻辑为，右滑块的中心点到背景矩形左端点的距离，再除以背景矩形的宽度，得到比例，乘以100，再用函数取整，再乘以100，得到100的倍数。
　　5、最后，添加判断条件
　　if“〔〔LVAR1。xLVAR1。width2〕〕”“〔〔LVAR1。right〕〕”，其中，左边LVAR1为右滑块，右边LVAR1为背景矩形。即当右滑块中心点位置在背景矩形的左端点时。
　　6、添加另一个条件交互事件（即右滑块中心点位置正好位于背景矩形的左端点。）
　　其中，滑块的移动，高亮矩形的尺寸公式一致，直接复制即可。
　　【价格区间】的文案变化为：〔〔Math。floor（（This。xThis。width2LVAR2。x）LVAR2。width100）100〕〕元不限，其中，LVAR2为背景矩形。
　　详细交互事件如下图所示：
　　7、同理，我们可以得到右滑块的交互事件，其实现逻辑与左滑块相似
　　详细交互事件如下如所示：
　　其中，右滑块的左右边界如下：
　　左侧〔〔LVAR1。right〕〕，其中LVAR1为元件【左滑块】；
　　右侧〔〔LVAR1。rightThis。width2〕〕，其中LVAR1为元件【背景】矩形；
　　高亮矩形的尺寸：〔〔This。xLVAR1。x〕〕，其中This为右滑块，LVAR1为左滑块。即宽度尺寸为左右两个滑块的距离。
　　设置【价格区间】文案：
　　1）当【右滑块】中心点位于【背景】矩形的右侧时，文案为：
　　〔〔Math。floor（（LVAR1。xLVAR1。width2LVAR2。x）LVAR2。width100）100〕〕元〔〔Math。floor（（This。xThis。width2LVAR2。x）LVAR2。width100）100〕〕元。其中，LVAR1为左滑块，LVAR2为背景矩形。
　　2）否则，文案为：
　　〔〔Math。floor（（LVAR1。xLVAR1。width2LVAR2。x）LVAR2。width100）100〕〕元不限。其中，LVAR1为左滑块，LVAR2为背景矩形。
　　四、预览效果
　　案例效果：