Axure中文学习网

  • 教程
  • 下载
  • 授权
  • 素材
  • 问答
  • 文档
文章
文章

{{userData.name}}已认证

文章

评论

关注

粉丝

¥{{role.user_data.money}}
{{role.user_data.credit}}
您已完成今天任务的
  • 私信列表所有往来私信

  • 财富管理余额、积分管理

  • 推广中心推广有奖励

    NEW
  • 任务中心每日任务

    NEW
  • 成为会员购买付费会员

  • 认证服务申请认证

    NEW
  • 小黑屋关进小黑屋的人

    NEW
  • 我的订单查看我的订单

  • 我的设置编辑个人资料

  • 进入后台管理

Axure中文学习网

  • 首页
  • 正版授权
  • 软件下载
    • Axure RP 10下载
    • Axure RP 9下载
    • Axure RP 8下载
    • Axure RP 7下载
    • Axure Share APP
    • 谷歌浏览器插件
  • Axure教程
    • 基础教程
    • 高级教程
  • 原型案例
  • Axure问答
  • 免费素材
  • 关于我们
写文章
axure商城

【Axure教程】中继器联动——二级下拉列表案例

  • 产品经理 高级教程
  • 3月22日
  • 编辑
Axure高保真原型
作者的AxureShop店铺

我们在画高保真原型的时候,经常会遇到需要两个或者以上中继器联动的情况,例如,我们可以选着一二级行政区,二级行政区又要根据一级的选择而发生改变,这时我们就需要用到中继器联动来制作这种效果。

所以今天就和大家分享中继器联动教程,我们以二级下拉列表为案例,教大家如何用中继器制作下拉列表,以及两个下拉列表之间的联动交互。

制作完成之应具备以下交互效果:

  1. 下拉列表由中继器制作,在中继器表格中填写选项,自动生成交互效果;
  2. 选择对应的一级行政区后,显示二级行政区的下拉列表,并且只显示该一级行政区下的城市。

原型地址:

https://axhub.im/ax9/09b38389df30358f/#g=1&p=2级联动下列表(显示)

一、基本材料的准备

矩形、上下箭头、中继器。

矩形+上下箭头组和默认显示的部分,这里上箭头也是默认隐藏的。

中继器+矩形(背景框)组合弹出选项,默认隐藏。

如果鼠标单击矩形+上下箭头组合是,我们用显示的交互将中继器+矩形(背景框)的弹出组合显示出来,这里记得选择灯箱效果,这样点击空白地方才能自动收起列表。

同时,当中继器+矩形(背景框)的弹出组合显示时,我们用显示隐藏的交互,将上箭头显示,下箭头隐藏;当中继器+矩形(背景框)的弹出组合隐藏时,我们放过来将上箭头隐藏,下箭头显示。

二、用中继器制作一级选项列表

我们新增一个中继器,中继器里面的矩形我们根据自身ui需要,修改样式和尺寸。

矩形的选中样式,选中的样式就是鼠标移入时变色(浅蓝色的样式),这里为什么不用鼠标悬停时呢,因为中继器里面用悬停时,然后点击变色之后,在点击其他选项,原来的选项还会有悬停的变色,这应该是bug,所以我们就用选中的样式来制作悬停效果。

鼠标移入时,我们用选中的交互,设置当前矩形选中状态为真;鼠标移出是,我们用取消选中的交互,设置当前矩形选中状态为假。

矩形的禁用样式,禁用样式为深蓝色,就是鼠标点击选择选项后该选项高亮的效果。

我们需要在中继器表格里增加两列,第一列原本就有的,我们将名字改为text,代表选项的文本,第二列是true,代表是否被选择,默认为空,就是没有被选择。

在中继器每项加载时,因为是中继器自带的矩形,所以有一个默认的交互,就是将text列的值设置到矩形里,这个交互我们不需要修改。

我们要新增一种情况,如果true列里面该行的值等于1,这代表了这个选项被选中了,我们用禁用的交互,把矩形禁用,再用设置文本的交互,让默认文字设置为当前的选项值。

鼠标单击中继器内矩形选项时,我们就更新true列的值就可以控制是否选中了。

首先我们要更新中继器内所有的行,将他们true列的值更新为0,因为不知道前面有没有被选中的选项,这样相当于先重置。

然后我们再用更新行的交互,将当前行的true列的值更新为1,这样就自动选择变色了。

然后还可以根据效果设置,有些下拉列表是选择了选项就隐藏器列表,我们就用隐藏的交互将他隐藏就可以了,有些选择了不默认隐藏的,就不需要操作,具体效果可以根据你们需要设置。

三、制作二级下拉列表

我们把上面的两部分内容直接复制出来一份,就变成二级下拉列表组合了,唯一不同的是,我们要在中继器里增加一列,上一级对应该二级选项对应的一级选项的内容是什么。

四、一二级下拉列表联动交互

二级下拉列表默认隐藏,在一级选项选择后,就是鼠标单击了一级选项之后显示出来,这里我们用显示的交互,将二级下拉列表显示出来。

显示后,我们不能列出所有的选项,所以我们要用筛选的交互,将属于选中的一级选项下的二级选项筛选出来,因为上一级这一列对应的是一级的选项,所以筛选条件就是一级下拉列表的选项值等于二级下来列表里上一级的值

那么以上就是Axure高保真原型——中继器联动(二级下拉列表案例)的制作教程了。

感谢您的阅读,我们下期见,88~

本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

给TA打赏
共{{data.count}}人
人已打赏
产品经理高级教程

【Axure教程】自动识别文件类型的上传列表

2023-2-16 11:41:14

案例教程高级教程

【Axure 动态面板】让你的动画变成“永动机”

2023-4-11 10:43:24

axure商城
1 条回复 A文章作者 M管理员

您必须登录或注册以后才能发表评论

  1. 珍妮163800
    珍妮163800 普通用户lv0
    3月30日

关于作者

Axure高保真原型

普通用户lv0

文章

6

评论

0

关注

0

粉丝

5
[文章] 【Axure教程】中继器联动——二级下拉列表案例
[文章] 【Axure教程】自动识别文件类型的上传列表
[文章] 【Axure教程】低代码可视化编辑器
[文章] 【Axure教程】自定义显示隐藏的中继器表格
Ta的全部动态

扫描加好友,备注加群,拉你进微信群:

AxureShop

最新发布

  • TOP1
    【Axure 教程】验证码,除了 12306,我还没有服过谁(文字点选篇)

    【Axure 教程】验证码,除了 12306,我还没有服过谁(文字点选篇)

    6月2日
  • TOP2
    【Axure 教程】验证码,除了 12306,我还没有服过谁(数学运算篇)

    【Axure 教程】验证码,除了 12306,我还没有服过谁(数学运算篇)

    5月24日
  • TOP3
    【Axure 游戏教程】面对现实的沉重打击,我在虚拟的世界里沉重打“鸡”

    【Axure 游戏教程】面对现实的沉重打击,我在虚拟的世界里沉重打“鸡”

    5月23日
  • 【Axure 教程】中继器,你过来,我们“聊聊”

    【Axure 教程】中继器,你过来,我们“聊聊”

    5月23日
  • 【Axure中继器】利用中继器,实现动态增加页签的功能

    【Axure中继器】利用中继器,实现动态增加页签的功能

    5月20日

热门文章

  • 1

    Axure绘制动态菜单

    22年7月3日
  • 2

    Axure中继器元件快速上手教程

    22年10月10日
  • 3

    Axure中文技术文档大全

    1月11日
  • 4

    Highcharts实现Axure动态可视化图表

    22年9月26日
  • 5

    Axure教程:高保真扫码登录

    22年7月21日
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服
  • 扫码打开当前页

  • 关注本站公众号

  • 扫码加微信客服

返回顶部
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分

今日签到

连续签到

  • {{item.credit}}
  • 连续{{item.count}}天
查看所有
我的优惠劵
  • ¥优惠劵
    使用时效:无法使用
    使用时效:

    之前

    使用时效:永久有效
    优惠劵ID:
    ×
    限制以下商品使用: 限制以下商品分类使用: 不限制使用:
    [{{ct.name}}]
    所有商品和商品类型均可使用
没有优惠劵可用!

购物车
  • ×
    删除
购物车空空如也!

清空购物车 前往结算
您有新的私信
没有新私信
写新私信 查看全部
Copyright © 2023 Axure中文学习网
・京ICP备18062017号-14 ・京公网安备 11011102001469号
查询 6 次,耗时 0.0966 秒
圈子教程授权
搜索菜单我的