之前，在《可以拖动的滑块》一文中我们模拟了Sample Form Patterns元件库中的滑块元件。
在Axure RP 10版本中，这个滑块元件增加了更多的交互。
新增的交互如下：
1、点击轨道左侧的“0”，滑块会移动到轨道最左侧。
2、点击轨道右侧的“100”，滑块会移动到轨道最右侧。
3、滑块移动时，会实时显示“0~100”的数值。
首先，我们在原来滑块元件的基础上添加新的元件。包括：
- 一个文本标签，默认文字为“选择数量”。
- 一个文本标签，命名为“数量”，默认文字为“50”。这是因为滑块初始位置为轨道中央。
- 轨道两侧的两个文本标签，默认文字为“0”和“100”。注意，这两个元件要和轨道紧贴在一起。
然后，我们逐一添加交互。
1、左侧按钮“0”的交互
左侧按钮“0”被[单击时]，要[移动][滑块][到达]指定的位置。
X轴是轨道的左边界值，可以通过局部变量进行获取。
Y轴保持目标元件[滑块]的Y轴坐标值不变，所以写入“Target.y”。
2、右侧按钮“100”的交互
右侧按钮“100”被[单击时]，同样要[移动][滑块][到达]指定的位置。
X轴不太一样，是轨道的右边界，还要减去目标元件的宽度。
为什么要减去目标元件的宽度？
可以看图理解一下。
Y轴还是保持目标元件[滑块]的Y轴坐标值不变，所以写入“Target.y”。
3、滑块移动时改变数量
注意，这个交互事件是滑块的[移动时]，而不是[拖动时]。
因为，点击左右两个数字按钮时，滑块会移动，但不是因为拖动。
在滑块[移动时]，我们为[数量]元件[设置文本]。
文本的值是一个计算公式。
计算方法是：
进度长度=滑块的X轴坐标值-轨道的X轴坐标值
总长度=轨道的宽度-滑块的宽度
数量=进度长度/总长度*100
转换为Axure的公式为：[[((This.x-Track.x)/(Track.width-This.width)*100).toFixed(0)]]
但是，这样写完之后得到的结果会出现小数。
所以，还要对计算结果进行取整。
取整函数是数字函数中的“toFixed()”函数。
它的参数是保留的小数位数。
我们将原来的计算公式加上小括号后，再调用“toFixed()”函数，就能够得到一个整数。
最终公式为：[[((This.x-Track.x)/(Track.width-This.width)*100).toFixed(0)]]
到这里，我们就完成了一个更优秀的滑块。
想夸我吗？给我留言吧！
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 可以拖动的滑块-升级版