Axure PR 9 二级滑动选择器 设计交互

devtools/2024/11/27 2:28:30/


​大家好,我是大明同学。

这期内容,我们来探讨Axure中二级滑动选择器设计与交互技巧。

二级滑动选择器

创建滑动选择器所需的元件

1.在元件库中拖出两个中继器元件。

2.选中中继器元件,样式窗格中分别命名,“左边,右边”

3.选中“左边”一级选择中继器元件,实现上下拖动的交互中继器没有拖拽交互,只有动态面板才有拖拽交互,所以需要右键将中继器转为动态面板。

选中(“左边”一级选择器)动态面板,在交互窗格中新建交互,拖动时,移动,当前,跟随垂直拖动。

预览效果,点击预览,在预览页面,选中“左边”一级选择中继器元件可以实现拖动效果。

限制动态面板的显示区域,让它只显示中间的选项

1.选中动态面板,右键,将动态面板再转为动态面板,在概要窗格选中第一层动态面板命名为左边,第二层动态面板命名为向左移动。

2.选中第一层“左边”动态面板,在样式窗格将高度设为30,只显示一行,将填充颜色设置为灰色(#F2F2F2)

3.选中第一层“左边”动态面板,双击到中继器内部矩形,将填充色设置为透明,线宽设置为 0。

预览效果,点击预览,在预览页面,“左边”一级选择中继器元件就实现了只显示一行,并且有拖动的效果。

给拖动效果添加边界

1.在第二层(向左移动)动态面板交互窗格,拖动时,移动交互中点击更多选项,添加界限,顶部 大于等于、底部 小于等于

2.选中顶部 大于等于 条件,插入变量或函数 [[30 - This.height]] ,底部 小于等于 条件,插入变量或函数 [[This.height]] 。

看一下 完整交互

预览效果,点击预览,在预览页面,“左边”一级选择中继器元件在拖动时顶部和底部都增加了边界,拖动到1时,无法继续向顶部拖动,拖动到3时,无法继续向底部拖动。

选中“左边”一级选择中继器元件,在样式窗格中添加两行,效果也是一样的。

判断选择值,确认所选项

1.在第二层动态面板交互窗格中新建拖动结束时,设置变量值,选择变量,添加变量 leftindex

2.设置leftindex变量值 值 为 插入变量或函数[[(-This.y/30).toFixed(0)+1]]

看一下完整交互

3.修正选择,添加动作,移动 当前 到达 y轴插入变量或函数 [[-(leftindex-1)*30]] 线性 500毫秒

预览效果,点击预览,在预览页面,“左边”一级选择中继器元件在拖动到选项三分之一时会修正选项。

根据一级选择器的选择结果筛选二级选择器的数据

1.选中二级选择器(右边),双击中继器元件,在样式窗格 数据表中增加linkleft 列,并补充数据。

2.添加关联性,选中一级选择器,在概要窗格点击向左移动动态面板交互窗格,添加动作,等待 500毫秒,添加筛选 右边

3.添加动作 更新行 左边 插入变量或函数 [[TargetItem.index == leftindex]]

4.在概要窗格中 选中“左边”中继器元件,样式窗格 数据 添加列 select 列

5.回到 更新行 +选择列 select 值 1 ,并将更新行交互移动到 设置变量值下

6.在概要窗格中 选中 “左边”中继器元件,在交互窗格中添加动作 设置变量值,选择变量,添加全局变量 leftselect

7.选择变量 leftselect 值 插入变量或函数 [[Item.Column0]]

8.添加判断条件 ,启用情形判断

情形1:如果"[[ltem.index]]" =="[[leftindex]]”

情形2:否则 如果"真” 复制粘贴 设置文本 交互

9.在概要窗格选中 “向左移动” 动态面板,回到交互窗格 添加筛选交互 规则 插入变量或函数 [[TargetItem.linkeft == leftselect]]

预览效果,点击预览,在预览页面,拖动“左边”一级选择中元件右边选择器会同步筛选结果。

右边选择器移动效果

1.选中右边选择器中继器元件,右键转为动态面板,在交互窗格 添加 拖动时,移动 当前 跟随垂直拖动,跟左侧是一样的。

2.新建交互 拖动结束时 移动 当前 到达

3.选中当前元件,右键,转为动态面板 ,复制 “向左移动”动态面板 设置变量值、移动交互粘贴到第二层动态面板

4.选中 设置变量值 交互 目标 添加变量 rightindex

将变量值 目标 改为 rightindex 其他不变

5.选中 移动 交互 将y轴全局变量 [[-(leftindex-1)*30]] 替换为 [[-(rightindex-1)*30]]

6.添加拖动边界

选中 拖动时交互,点击更多选项 添加边界,顶部 大于等于 插入变量或函数 [[30-This.height]], 底部 小于等于 插入变量或函数 [[This.height]]

选中右边第一层动态面板,在样式窗格中,设置高度为 30,设置填充颜色为灰色 (#F2F2F2)

选中“右边”动态面板,双击进入中继器矩形,填充颜色设置为透明,线宽设为0。

预览效果,点击预览,在预览页面,拖动“左边”一级选择中元件右边选择器显示效果和左边同步。

添加默认选择

1.在项目列表中 选择 全局变量 选中leftindex 设置默认值为 1

2.选中右边选择器第一层动态面板,在交互窗格命名为 右边,第二层动态面板命名为向右移动。

3.在概要窗格中 选中“向右移动”新建交互 载入时 添加筛选 右边 规则 插入变量或函数 [[TargetItem.linkleft == leftselect]]

预览效果,点击预览,在预览页面,拖动“左边”一级选择中元件,右边选择器只显示左边选项对应结果。

1.在中继器 样式 窗格 数据表中 可以修改一级选择器和二级选择器的内容,*二级选择器的内容需要和一级选择器的内容有关联。

2.在概要窗格中 选中 “向左移动” 在交互窗格中 添加 移动 向右右边 到达 (0,0)交互

预览效果,点击预览,在预览页面,拖动“左边”一级选择中元件,右边选择器会同步显示对应结果。

预览地址:https://hfez21.axshare.com

OK,这期内容到这里就结束了。

我是大明同学

下期见


http://www.ppmy.cn/devtools/137283.html

相关文章

裸金属服务器能够帮助企业解决哪些问题?

随着网络科技的快速发展,企业业务也在不断的进行扩张和复杂化,传统的服务已经无法满足企业对于高性能和高稳定性的需求,而裸金属服务器则能够帮助企业来解决这一问题,下面我们就来具体看一下吧! 裸金属服务器能够允许应…

docker离线安装linux部分问题整理

0:离线安装docker过程命令 echo $PATH tar -zxvf docker-26.1.4.tgz chmod 755 -R docker cp docker/* /usr/bin/ root 权限 vim /etc/systemd/system/docker.service --------- [Unit] DescriptionDocker Application Container Engine Documentationhttps://docs.do…

如何用通义灵码快速绘制流程图?

使用通义灵码快速绘制流程图?新功能体验 不想读前人“骨灰级”代码,不想当“牛马”程序员,想像看图片一样快速读复杂代码和架构? 通义灵码已经支持代码逻辑可视化,可以把你的每段代码画成流程图。像个脑图工具一样帮你…

web组态软件

1、强大的画面显示web组态功能 2、良好的开放性。 开放性是指组态软件能与多种通信协议互联,支持多种硬件设备,向上能与管理层通信,实现上位机和下位机的双向通信。 3、丰富的功能模块。 web组态提供丰富的控制功能库,满足用户的测…

如何定制谷歌浏览器的外观主题

在数字化时代,浏览器已成为我们日常生活中不可或缺的一部分。谷歌浏览器,以其快速、稳定和丰富的扩展程序而广受用户喜爱。但你知道吗?除了强大的功能外,谷歌浏览器还允许用户通过定制外观主题来打造更加个性化的浏览体验。本文将…

C#(12) 内部类和分部类

前言 我们发现,其实我们这几节一直都在学习拓展相关的方法,不管是拓展方法,还是运算符重载,还是今天的内部类和分部类。它们都可以用来增强、扩展或重新定义类的功能,使得代码更加灵活和可重用。 研究分部类和内部类…

python VS c++

一、语法特点 Python: 语法简洁、优雅,代码可读性极强,采用缩进来表示代码块,摒弃了像 C 那样使用大括号的传统方式,使得代码看上去十分清晰简洁。例如: ​ if 5 > 3:print("5大于3") elif 5 …

Oracle SQL优化③——表的连接方式

前言 表(结果集)与表(结果集)之间的连接方式非常重要,如果CBO选择了错误的连接方式,本来几秒就能出结果的SQL可能执行一天都执行不完。如果想要快速定位超大型SQL性能问题,就必须深入理解表连接…