axure商城

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

本文适合对中继器有一定使用基础的同学。

一、先看效果

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

二、实现思路

1、菜单,通过前面讲过的中继器实现;

见文章:https://www.axure.com.cn/86880

2、点击菜单后,通过对页签的中继器增加行数据来实现;

3、如果页签数据以前添加过的,则定位到这个行数据后,进行选中状态即可;

4、删除某一个页签即是删除页签中继器中的某一个数据即可。

三、需要的元素

1、组件:中继器两个(一个用于菜单,一个用于页签显示),分别命名为:rp_Menu和rp_PageTab

rp_Menu中的组件:Label \ Box \ Icon(箭头)

如图:

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

Rp_Menu中继器表格设置如下:

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

 

Rp_PageTab中的组件:Box\关闭

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

用于显示页签名称和关闭按钮

Rp_Page中继器表格的设置如下:

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

2、全局变量:

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

Pgs:保存已打开的页面名称;

DelID:用于保存需要删除的页签ID;

IsMarked:用于保存当前的页签,显示为选中状态。

四、添加交互即可实现

1、rp_Menu,每项加载如下:

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

2、rp_Menu,加载交互如下:

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

3、菜单点击交互如下:

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

4、rp_PageTab,每项加载如下:

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

5、rp_PageTab菜单的点击交互如下,点击是为了定位到该页面(页签):

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

6、rp_Pagetab菜单的“关闭”按钮,点击交互如下:

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

 

演示效果:https://tdazfx.axshare.com/#id=0joqdw&p=page_1

 

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

【Axure 教程】中继器,你这个“渣男”(实战篇)

2023-5-20 9:17:27

高级教程

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

2023-5-23 15:51:30

axure商城
49 条回复 A文章作者 M管理员
  1. 小屁股麻麻

    【Axure中继器】利用中继器,实现动态增加页签的功能
    导航和页签,没有实现联动,求RP8或RP9能打开的源文件。542317387@qq.com

  2. vinci180364

    楼主,谢谢你的分享,可不可以发我一份源文件,我研究好几天了都没弄明白1961919344@qq.com

  3. ohmy

    源码地址:https://gitee.com/jiahang_jh/axure.git

  4. ohmy

    菜单栏三级联动+标签页联动

  5. 雒陽水手

    老师您好,按照您的文章在学习,有几个地方没搞明白,能否发个源文件给我做个参考,不胜感谢!
    35759565@qq.com

  6. Littledream

    很好,可否发个源文件,谢谢。

  7. CQ

    厉害,发个源文件哇。谢谢
    784158765@qq.com

  8. 浱

    求一个源文件,感谢感谢596085859@qq.com

  9. 素里

    博主厉害!

  10. 听175667

    点击菜单选中菜单和出现标签一直有问题,求一个源文件,感谢感谢695305536@qq.com

  11. piecing

    博主,根据文章操作了一遍,标签页没有复现出名称,求一个源文件哇,感谢!!!3189373283@qq.com

  12. Two

    博主大大好,试了几天了,都实现不了,跪求博主给一个源文件,深谢博主 309172743@qq.com

  13. 蒙奇包子

    这个是真的太复杂了,求博主给一个源文件,非常感谢!!! 903355539@qq.com

  14. Thomson

    求一份源文件,点击过后,再次点击没有选中。求大佬给一份源文件;1336634235@qq.com

  15. MrHuang

    求一份源文件,感谢!!!412034989@qq.com

  16. 茶山麋鹿

    求源文件😭英文难度+n,中继器预览不显示😖2493790177@qq.com

  17. oοゞ哲ゞοo

    跪求一个源文件,感谢伟大博主!306924624@qq.com

  18. Enrico

    前辈,请教您如果在iFrame打开的页面内想做某元件打开某页面的交互该如何实现呢?iFrame内的页面与侧边导航和页签栏是不在同一页面的,无法跨页面执行交互动作;如果使用全局变量记录目标页面,交互设置父级框架重新加载带有导航和页签的页面,跨页面传参会导致全局变量重置,也无法实现。做到这里卡主好久了,请前辈赐教

  19. Enrico

    前辈,我自己也撸了个侧边导航和页签,实现思路和您的是完全一样的。遇到一个无法实现的新问题请教您:如果iFrame当中存在交互需要打开新页面时该如何实现?iFrame内打开的页面里的元件交互动作是无法给到iFrame之外的父级的,如果重新加载父级页面,那么所有的全局变量又会丢失,做到这里卡住了,感谢查看,期待指点😙

    • 深南大道

      不是很理解。但我也试着理解了一下。https://4hhwai.axshare.com
      看下是不是这个效果

  20. 川149802

    求博主给一个源文件,非常感谢!!! 601981146@qq.com

  21. 叽里呱啦

    大佬,给个原型吧,实在复刻不出来了,试了一天了,非常感谢3415282088@qq.com

  22. 咘咘のF

    大佬,辛苦给个原型学习学习,感谢感谢 624308698@qq.com😁

  23. 张名非

    哥,求一下动态页签那个项目1965127595@qq.com

  24. 西红柿爱番茄

    还有,全局变量:DelID、IsMarked在文中都没用到,是否是没有用的?

  25. 西红柿爱番茄

    请问:这段设置update rows rp_pagetab set none for this作用是什么?有点不太理解,谢谢

    • 深南大道

      因为中继器要刷新数据是在加载时,中继器只有在更新数据或者插入数据,才会重新加载每一项的事件(OnItemLoad)
      所以 用update 当前行来出发更新命令而已(实际没有更新数据),这样就会重新加载每一项的内容(相当于“刷新”)

  26. 阿白170661

    博主好,试了好几次都不能完整复现,跪求源文件736844242@qq.com

  27. 西红柿爱番茄

    跪求一个源文件,感谢!395838476@qq.com

    • 西红柿爱番茄

      请问:update rows re_pagetab set none for this,这段设置的目的是什么?没太理解,谢谢

  28. 新手上路

    博主能发个源码吗?万分感谢。lee_cn@qq.com

  29. AIMER169466

    能发下源文件吗

  30. 交互视觉
    交互视觉给作者打赏了¥2
  31. 交互视觉

    重复步骤好像没有呢,能发整个吗?991081800@qq.com

  32. 999ms

    求一个源文件,没整明白怎么设置不重复打开tab,dasing22@sina.com 感谢。

  33. 啊远

    求教程

  34. Hello

    页签和页面链接跳转的定位的问题?求教程

    • 深南大道

      看各自的“点击”事件。主要原理就是:点击一个“菜单”后,根据这个菜单的内容,去定位到另外一个中继器的行数,然后把这一行做“标记”即可。

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