axure商城

【Axure 教程】中继器入门教程-数据排序

入门教程会分为 6 个小节,本节主要讲解如何实现中继器的数据排序

【Axure 教程】中继器入门教程-数据排序

原型展示:https://5ejk3o.axshare.com

所需原件:

  1. 中继器
  2. 小三角

本文主要讲解中继器的基本用法,以便大家更容易去理解和学习中继器的高级用法,入门教程会分为 6 个小节,本节主要讲解如何实现中继器的数据排序


一、列表制作

【Axure 教程】中继器入门教程-数据排序

这里我们直接引用课程 【Axure 教程】中继器入门教程-列表制作 中制作的列表,快速修改表头和中继器数据后,得到一个列表,如上图;

二、状态设置

【Axure 教程】中继器入门教程-数据排序

拖入两个小三角,拼成一个排序 icon,组合后创建动态面板,并设置三个状态:默认、升序、降序,如上图所示;

【Axure 教程】中继器入门教程-数据排序

选中表头的【年龄】文本标签,创建交互,在点击时,设置排序 icon 的面板状态,并添加中继器的排序,如上图所示;

【Axure 教程】中继器入门教程-数据排序

注意在不同的状态下,对应的排序规则,并在【降序】切换到【默认】状态时,移除所有排序;

【Axure 教程】中继器入门教程-数据排序

同理,生日的排序,大家可以自己尝试一下 : )


四、细节优化

【Axure 教程】中继器入门教程-数据排序

我们希望在年龄和生日两个排序切换时,重置对方的排序状态,因此为每个交互添加将对方面板状态置为【默认】状态的交互动作,如上图所示;


更多内容,微信搜索“爱学儿”,一起交流探讨吧!

给TA打赏
共{{data.count}}人
人已打赏
基础教程

【实用案例教程】如何用axure中继器制作图片水印和文字水印

2021-5-25 12:40:14

基础教程

【Axure 教程】中继器入门教程-列表查询

2021-5-27 12:58:42

axure商城
2 条回复 A文章作者 M管理员
  1. 兔子大仙?

    您好,想问下,点击一个按钮对中继器里一列数据排序,在axure8上没问题,axure9上就是不成功是什么原因?

    • SamDesigner

      我猜,你应该是用了 Axure 9 的汉化包了,只有移除汉化包才能恢复正常喔,另外,如果想继续用汉化包,那就试试【发布到 Axure 云】,一样可以看到排序效果的。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索