適配版本Axure RP 9.0一、功能說(shuō)明利用中繼器自帶【每項(xiàng)加載時(shí)】事件添加判定條件公式[[Item.index % 2 0]]偶數(shù)行自動(dòng)修改行背景色奇數(shù)行保留原色實(shí)現(xiàn)列表斑馬紋交替變色區(qū)分各行數(shù)據(jù)提升表格可讀性。效果說(shuō)明偶數(shù)行索引值為0、2、4...的行會(huì)自動(dòng)應(yīng)用設(shè)置的背景色形成高亮行奇數(shù)行索引值為1、3、5...的行保持原有樣式與高亮行形成對(duì)比動(dòng)態(tài)響應(yīng)當(dāng)列表數(shù)據(jù)新增、刪除或排序時(shí)斑馬紋效果會(huì)自動(dòng)重新計(jì)算并適配始終保持交替顯示的規(guī)律二、前期基礎(chǔ)準(zhǔn)備左側(cè)組件庫(kù)拖拽【中繼器】至頁(yè)面畫布自定義命名數(shù)據(jù)列表中繼器雙擊中繼器1進(jìn)入中繼器內(nèi)部選中整行轉(zhuǎn)換為動(dòng)態(tài)面板2設(shè)置兩個(gè)狀態(tài)奇數(shù)和偶數(shù)3點(diǎn)擊偶數(shù)狀態(tài)選中整行底層背景矩形承載行背景顏色 #018FE0注意 提前錄入多行測(cè)試數(shù)據(jù)方便預(yù)覽查看奇偶變色效果三、核心交互設(shè)置右側(cè)交互面板新建交互觸發(fā)事件選擇每項(xiàng)加載時(shí)點(diǎn)擊【啟用情形】粘貼判定公式[[Item.index % 2 0]]情形名稱輸入偶數(shù)點(diǎn)添加條件按鈕1第一空選擇值2第二空粘貼判定公式[[Item.index % 2]]3最后一空03. 設(shè)置面板狀態(tài)1點(diǎn)擊添加工作2選擇【設(shè)置面板狀態(tài)】目標(biāo)動(dòng)態(tài)-奇偶頁(yè)面根據(jù)自己維護(hù)的State偶數(shù)點(diǎn)【確定】3.復(fù)制上面1編輯情形情形名稱奇數(shù)刪除條件2修改面板狀態(tài)State奇數(shù)3調(diào)整【設(shè)置文本】由于復(fù)制原因可能出現(xiàn)第一個(gè)情形的文本目標(biāo)都變?yōu)槠鏀?shù)目標(biāo)改為偶數(shù)下的字段四、公式釋義Item.index中繼器自帶原生行下標(biāo)從0開始計(jì)數(shù)[[Item.index % 2 0]]下標(biāo)除以2余數(shù)為0判定為偶數(shù)行執(zhí)行變色奇數(shù)行保持默認(rèn)原色。五、功能效果F8預(yù)覽原型列表自動(dòng)分隔變色一行原色、一行自定義底色形成標(biāo)準(zhǔn)斑馬紋樣式新增、刪除數(shù)據(jù)后奇偶顏色自動(dòng)適配刷新。六、重點(diǎn)注意事項(xiàng)交互必須添加在中繼器內(nèi)部行背景元件上事件必須選擇【每項(xiàng)加載時(shí)】公式符號(hào)全部為英文符號(hào)禁止輸入中文標(biāo)點(diǎn)否則判定失效想要奇數(shù)行變色修改公式為[[Item.index % 2 1]]即可七、效果圖