上一節我們講解了中繼器的基本原理和使用方法，本文通過幾個實際的案例來幫助大家更進一步的掌握中繼器的使用方法，感受中繼器的強大。在原型設計時，善于利用中繼器，可以有效提高原型的保真度。

案例一：商品列表頁

商品列表.png

商品列表頁涉及的交互主要包含篩選、排序以及翻頁，下面我們來看看利用中繼器如何實現這些前端交互效果。
拖入中繼器至設計區域，雙擊中繼器為中繼器設置項，在中繼器編輯界面添加圖片及文本標簽元件，作為商品圖片、標題、價格、銷量及評價的項，做好元件的命名工作。為中繼器添加數據集，注意數據集中列的名稱必須為英文（誰讓Axure是美國人開發的工具產品）。

數據集.png

使用中繼器“每項加載時”事件，將數據集內容賦值給標題、價格、銷量及評價這些項，(圖片就不導入了，有時間也可以添加到數據集）。使用設置文本動作，將數據賦值給中繼器的變量[[Item.title]]、[[Item.price]]、[[Item.sale]]、[[Item.evaluate]]。

每項加載時.png

在中繼器外添加一些矩形元件作為排序規則和篩選條件，按照價格、銷量、評價進行排序，按照價格區間作為篩選條件，綜合和全部作為默認排序和默認篩選。

01 排序

在這個案例中，我們需要實現按照價格降序、銷量降序、評價降序查看商品列表。
價格升序：選中元件，添加“鼠標單擊事件”，選中當前元件，動作配置面板中選擇“添加排序”動作，名稱填寫“價格由低到高”，列選擇price，排序類型選擇Number,排序選擇升序。將當前元件設置為選中樣式。（提前將價格、銷量、評價等排序規則設置為一個組）

價格升序.png

銷量降序：選中元件，添加“鼠標單擊事件”，選中當前元件，動作配置面板中選擇“添加排序”動作，名稱填寫“銷量由高到低”，列選擇sale，排序類型選擇Number，排序選擇為降序。將當前元件設置為選中樣式。

銷量降序.png

評價的設置方法同銷量一致，只是參與排序的列不同，這里不做重復說明。
綜合：為元件設置“鼠標單擊事件”，設置選中樣式，選擇“移除排序”動作，移除全部排序。

移除全部排序.png

02 篩選

按照1999以下、2000-3999、4000-5999、6000以上這幾個價格區間篩選商品。
1999以下：為元件設置“鼠標單擊事件”，設置選中樣式（提前將篩選條件設置為一個組），選擇中繼器動作“添加篩選”，選中中繼器，設置名稱“1999元以下”，規則填寫[[Item.price<=1999]]，移除其它篩選。設置如下圖所示：

添加篩選-1.png

6000元以上設置與此類似。
2000-3999：設置“鼠標單擊事件”，設置選中樣式，添加動作“添加篩選”，選中中繼器，設置名稱“2000元-3999元之間”，規則填寫[[Item.price<=3999&&Item.price>=2000]]，移除其它過濾。設置如下圖所示：

添加篩選-2.png

全部：選中元件，添加“鼠標單擊事件”，設置選中樣式，添加動作“移除篩選”，移除所有過濾器。如下圖所示：

移除全部篩選.png

03 翻頁

點擊上一頁或下一頁按鈕實現商品列表的翻頁，實現思路如下：
為矩形按鈕設置“鼠標單擊事件”，添加“設置當前顯示頁面”動作，頁面選擇Next或Previous。設置如下圖所示：

翻頁.png

案例2：用戶信息列表

用戶列表.png

元件準備：拖動中繼器至設計區域，雙擊中繼器進入編輯界面，拖動6個矩形，前四個矩形命名為姓名、性別、年齡、地區，后面兩個矩形為編輯按鈕和刪除。將前面5個矩形選中并轉化為動態面板，動態面板第一個狀態命名為顯示，復制狀態一數據，第二個狀態命名為編輯，并將編輯修改為保存。拖動四個文本框至前4個矩形框中，4個文本框分別命名為：編輯姓名、編輯性別、編輯年齡和編輯地區，取消編輯狀態中前四個矩形的命名。
選中中繼器，分別添加NameText、SexText、AgeText和RegionText這四列數據，默認Column列保存，作為行的序號。至此，所有的元件準備工作已經結束。

關于數據集的具體使用方法，請參照《Axure 9.0高級教程：史上最強元件-中繼器的使用方法》。

01 編輯/保存數據

我們期望實現的效果如下：

• 點擊編輯，可以對當前行的數據字段進行編輯。
• 點擊保存，更新當前行的數據，使編輯修改后的數據生效。
  為了實現上述的效果，我們需要對編輯和刪除這兩個矩形元件設置以下交互。
  編輯：選中元件，設置“鼠標單擊事件”，首先添加“設置面板狀態動作”，將動態面板切換為編輯狀態；然后為姓名文本添加“獲取焦點”動作。交互設置如下圖所示：
  
  編輯.png
  
  保存：選中元件，設置“鼠標單擊事件”，添加中繼器“更新行”動作，將前面四項修改后的數據保存到中繼器數據集中，將前四項文本框的文字設置為局部變量LVAR1；添加“設置面板狀態動作”，將動態面板切換為顯示狀態。交互設置如下圖所示：
  
  保存.png

02 插入數據

首先拖動一個菜單元件至頁面設計區域（注意不要拖入到中繼器面板），菜單內容分別填充為前面插入和后面插入，隱藏菜單。首先我們還是照例觀察下這兩個菜單的功能及效果：
前面插入

• 在當前行前面插入一條為編輯狀態的空數據。
• 增加的行序號為插入行的序號。
• 插入行及后面行的序號+1。
  后面插入
• 在當前行后面插入一條為編輯狀態的空數據。
• 增加的行序號為插入行的序號+1。
• 插入行后面行的序號+1。

插入行的交互實現思路如下：
右擊菜單：選中動態面板，為動態面板設置“鼠標右擊事件”，利用全局變量存儲當前行的序號，為以后行序號的更變做好基礎。這里利用系統默認的全局變量OnLoadVariable存儲插入行的序號，移動菜單達到鼠標的位置，顯示菜單 。設置如下圖所示：

右擊菜單.png

前面插入：為菜單項添加“鼠標單擊事件”，添加中繼器動作“更新行”，設置規則：當序號大于等于插入行序號時，目標行序號+1，添加一條與插入行序號一致的空數據，隱藏菜單。交互設置如下圖所示：

前面插入行.png

后面插入行.png

賦予空值.png

中繼器
如果想要將插入行的數據默認為編輯狀態，我們需要為中繼器事件“每項加載時”，添加一個新的情形（情形就是用例，9.0漢化后的叫法不同）。當全局變量OnLoadVariable等于序號時，設置動態面板為編輯狀態，姓名文本獲取焦點。
為了保證插入行后，數據按照正確的序號進行排序，而不是插入行數據永遠顯示在最后一行，則需要為中繼器重新添加排序規則，按照序號數字排序。中繼器交互設置如下圖所示：

中繼器交互設置.png

03 刪除行數據

選中刪除矩形元件，設置“鼠標單擊事件”，添加中繼器動作“刪除行”，動作配置面板中選擇當前行。設置如下圖所示：

刪除行

如果你對Axure或原型設計有興趣，希望系統性地學習Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進一步提升高保交互設計能力。請點擊下方關注按鈕，查看更多連載作品。
點擊獲取案例作品源文件