axure商城

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

一、效果

展示效果如下:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

二、绘制元件

1、【中继器1】:命名为“菜单”,将中继器中的矩形命名为“菜单矩形”,矩形大小设置为230*184。备选数据的列:id,menu,url。

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

添加的备选数据如下:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

2、【中继器2】:命名为“页签”,将中继器中的矩形为“页签矩形”,矩形大小设置为120*30。备选数据的列:id,menu。不设置备选数据。设置矩形“页签矩形”的交互样式:选中设置为紫色背景,白色字体。

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

3、【形状】:命名为“关闭”。大小设置为15*15。

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

4、【中继器3】:命名为“页面”,将中继器中的矩形为“页面矩形”,矩形大小设置为1200*800。备选数据的列:id,url,sort。不设置备选数据。

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

三、添加全局变量

添加三个全局变量sort、id、ids。中继器交互时使用。

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

四、添加交互

1、为中继器“菜单”【每项加载】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

为中继器“菜单”中的矩形“菜单矩形”【单击时】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

2、为中继器“页签”【每项加载】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

为中继器“页签”中的矩形“页签矩形”【单击时】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

3、为形状“关闭”【单击时】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

4、为中继器“页面”【载入时】、【每项加载】事件添加动作,详细动作见图:

Axure中继器教程:使用中继器实现菜单及tab页签联动的展示

给TA打赏
共{{data.count}}人
人已打赏
案例教程

Axure中继器初级教程:用中继器做一个漂亮的系统首页展示内容

2020-11-3 10:42:16

案例教程

Axure学习笔记:自定义搜索,模拟真实网站搜索

2020-11-27 12:07:16

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

    页面添加行,新增1行
    id:item.id
    url:item.url
    sort:sort
    页签添加行,新增1行
    id:item.id
    menu:item.menu
    —————-
    有个地方注意是在axure 9中 页面加载新增排序 选择数字不太像,选择textt(Case Sensitive)才可以。

  2. 鬼鬼

    isMarked什么时候赋值的?

    • Eeuln

      那不是赋值,那是判断哦,增加判断条件及标记动作

  3. 杰尼龟

    的确按照上述说法 做不出来他的样子 首先页面切换没有 其次一点点击重复页面 页面是不会跳转的

    • 杰尼龟

      是我的问题 规则参数的位置一定要看清楚 是[[TargetItem.id==Item.id]] 不能是[[TargetItem.id]]==[[Item.id]] 结果差别很大

  4. Bearstar

    讲得乱七八糟,最后一步根本做出来

  5. 爱转角

    这有下载的地方吗?

  6. Arvin吕

    老师,给个预览网址

  7. 133****3204
  8. James2119
  9. 150****9576

    最后一步中,每项加载:框架中打开连接[[item.url]]在 页面显示页

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