适配版本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最后一空03. 设置面板状态1点击添加工作2选择【设置面板状态】目标动态-奇偶页面根据自己维护的State偶数点【确定】3.复制上面1编辑情形情形名称奇数删除条件2修改面板状态State奇数3调整【设置文本】由于复制原因可能出现第一个情形的文本目标都变为奇数目标改为偶数下的字段四、公式释义Item.index中继器自带原生行下标从0开始计数[[Item.index % 2 0]]下标除以2余数为0判定为偶数行执行变色奇数行保持默认原色。五、功能效果F8预览原型列表自动分隔变色一行原色、一行自定义底色形成标准斑马纹样式新增、删除数据后奇偶颜色自动适配刷新。六、重点注意事项交互必须添加在中继器内部行背景元件上事件必须选择【每项加载时】公式符号全部为英文符号禁止输入中文标点否则判定失效想要奇数行变色修改公式为[[Item.index % 2 1]]即可七、效果图
适配版本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最后一空03. 设置面板状态1点击添加工作2选择【设置面板状态】目标动态-奇偶页面根据自己维护的State偶数点【确定】3.复制上面1编辑情形情形名称奇数删除条件2修改面板状态State奇数3调整【设置文本】由于复制原因可能出现第一个情形的文本目标都变为奇数目标改为偶数下的字段四、公式释义Item.index中继器自带原生行下标从0开始计数[[Item.index % 2 0]]下标除以2余数为0判定为偶数行执行变色奇数行保持默认原色。五、功能效果F8预览原型列表自动分隔变色一行原色、一行自定义底色形成标准斑马纹样式新增、删除数据后奇偶颜色自动适配刷新。六、重点注意事项交互必须添加在中继器内部行背景元件上事件必须选择【每项加载时】公式符号全部为英文符号禁止输入中文标点否则判定失效想要奇数行变色修改公式为[[Item.index % 2 1]]即可七、效果图
