滑块 | Slider

利用一个可拖动的手柄来创建一个水平滑块或者垂直滑块。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:开始

在联系文件中打开“滑块”页面。

改页面包含一个由两个矩形元件构成的组合,其中一个矩形是滑块的背景,另一个矩形是可拖动的手柄。

点击组合,然后再次点击手柄元件来选中它,在手柄上点击右键然后选择“转换为动态面板”。

STEP2:实现拖动

在“手柄”元件选中的情况下,在属性页签下双击“拖动时”来创建一个新的拖动时用例。

在左侧“添加动作”栏,点击“移动”。

在右侧“配置动作”栏,选择“当前元件”。

在这一栏的底部,设置“移动”下拉列表的选项为“水平拖动”,这样可以控制元件只能在水平方向上移动。

在“移动”的下面,点击“添加边界”。

在第一个下拉列表中,选择“左侧”,在下一个下拉列表中,选择“>=”,然后点击“fx”图标来编辑值。

在“编辑值”对话框底部的“局部变量”区域,点击“添加局部变量”,变量名称默认为“LVAR1”即可。

在第一个下拉列表中,选择“元件”。

在最后一个下拉列表中,选择“背景”。

然后在当前对话框顶部的输入框中输入:[[LVAR1.left]]。

点击“确定”按钮关闭编辑值对话框,现在已经设置好了第一个边界,向左拖动元件时,最多只能拖到背景的左边界(而不能超出)。

在用例编辑器右侧“配置动作”栏的底部,再次点击“添加边界”来为滑块添加一个右边界。

在第一个下拉列表中,选择“右侧”,在下一个下拉列表中,选择“<=”,然后点击“fx”图标来编辑值。

在“编辑值”对话框底部的“局部变量”区域,点击“添加局部变量”,变量名称默认为“LAVR1”即可。

在第一个下拉列表中,选择“元件”。

在最后一个下拉列表中,选择“背景”。

然后在当前对话框顶部的输入框中输入:[[LVAR1.right]]。

点击“确定”按钮关闭编辑值对话框,这样就设置好了第二个边界,向右拖动元件时,最多只能拖动到北京的右边界(而不能超出)。

点击“确定”按钮关闭用例编辑器。

STEP3:预览

点击预览。

尝试拖动滑块手柄。

更多:垂直滑块

创建一个垂直滑块,不要忘记了改变手柄的移动方式为“垂直拖动”,然后设置边界为“顶部”和“底部”,如果需要帮助,可以添加我的微信:urmagic。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。