欢迎光临
我们一直在努力

Axure9.0 中继器奇偶行交替变色(斑马纹)教程

适配版本

Axure RP 9.0

一、功能说明

利用中继器自带【每项加载时】事件,添加判定条件公式:[[Item.index % 2 == 0]],偶数行自动修改行背景色,奇数行保留原色,实现列表斑马纹交替变色,区分各行数据,提升表格可读性。

效果说明:
  • 偶数行:索引值为0、2、4…的行会自动应用设置的背景色,形成高亮行
  • 奇数行:索引值为1、3、5…的行保持原有样式,与高亮行形成对比
  • 动态响应:当列表数据新增、删除或排序时,斑马纹效果会自动重新计算并适配,始终保持交替显示的规律

二、前期基础准备

  • 左侧组件库,拖拽【中继器】至页面画布,自定义命名:数据列表中继器
  • 双击中继器
  • (1)进入中继器内部,选中整行,转换为动态面板

    (2)设置两个状态,奇数和偶数

    (3)点击偶数状态,选中整行底层背景矩形(承载行背景颜色 #018FE0)

    注意: 提前录入多行测试数据,方便预览查看奇偶变色效果

    三、核心交互设置

  • 右侧交互面板,新建交互,触发事件选择:每项加载时
  • 点击【启用情形】,粘贴判定公式:[[Item.index % 2 == 0]]
  • 情形名称:输入偶数

    点添加条件按钮:(1)第一空:选择值(2)第二空:粘贴判定公式:[[Item.index % 2]]

    (3)最后一空:0

    3. 设置面板状态

    (1)点击添加工作

    (2)选择【设置面板状态】

    目标:动态-奇偶页面(根据自己维护的)

    State:偶数

    点【确定】

    3.复制上面

    (1)编辑情形

    情形名称:奇数

    删除条件

    (2)修改面板状态

    State:奇数

    (3)调整【设置文本】,由于复制原因,可能出现第一个情形的文本,目标都变为奇数

    目标:改为偶数下的字段

    四、公式释义

    Item.index:中继器自带原生行下标,从0开始计数;

    [[Item.index % 2 == 0]]:下标除以2余数为0,判定为偶数行,执行变色;奇数行保持默认原色。

    五、功能效果

    F8预览原型,列表自动分隔变色,一行原色、一行自定义底色,形成标准斑马纹样式,新增、删除数据后,奇偶颜色自动适配刷新。

    六、重点注意事项

  • 交互必须添加在中继器内部行背景元件上,事件必须选择【每项加载时】;
  • 公式符号全部为英文符号,禁止输入中文标点,否则判定失效;
  • 想要奇数行变色,修改公式为:[[Item.index % 2 == 1]]即可;
  • 七、效果图

    赞(0)
    未经允许不得转载:171主机测评 » Axure9.0 中继器奇偶行交替变色(斑马纹)教程
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址