最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

可以拖动的滑块-升级版

教程 小楼一夜听春语 326浏览

之前,在《可以拖动的滑》一文中我们模拟了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 » 可以拖动的滑块-升级版