中繼器是 Axure 中相對較難上手的一個元件，但是一旦熟練掌握後，可以讓産品經理在做一些重複性設計比較多的頁面時，獲得事半功倍的效果，本文主要通過講解中繼器的屬性和事件，帶你初窺中繼器的世界。

當你掌握了中繼器的用法，在做一些重複性設計的頁面的時候，可以獲得事半功倍的效果，令你心情愉悅；但是你會發現中繼器與“渣男”一樣，難以掌握，它不僅“渣”，而且“雜”，複雜，要真正運用好中繼器有一定的難度，本篇文章将告訴你中繼器的各種特性，教你将中繼器這個“渣男”拿捏。

本文是中繼器教程的最後一篇，也是綜合運用實戰，如果你對中繼器的使用還不是很熟悉，甚至之前都沒有用過中繼器，建議先看前面的“基礎篇”和“進階篇”，否則閱讀本文對你來說會有點吃力。

傳送門：

本次我們的實戰項目是做一個學生管理表，以下是界面截圖：

一、界面設計

界面這塊非常簡單，最上面是查詢條件和添加按鈕，中間的表格是一個中繼器，最下面是分頁操作，還有一個隐藏的彈窗，用來添加和修改數據用的。

中繼器裡面放了一行表格，為了方便我們待會能快速找到對應的單元格填入數據，建議給每個單元格做好命名：

中繼器的字段如下，為了方便演示，我在中繼器内放了100行數據：

最後我們還需要幾個相對應的全局變量，其中需要注意的是【add_or_update】這個變量，由于我這裡設計的添加和編輯用的是同一個彈窗，所以需要一個變量來告訴系統當前正在做的操作是添加還是編輯：

二、載入數據

載入數據非常簡單，隻需要給【中繼器】添加【每項加載時】的事件，将各個字段的值填入到對應的單元格即可：

但你會發現，這裡并沒有一次性加載全部的100條數據，而是隻加載了其中的10條：

這是因為我在中繼器載入的時候，做了一個分頁，每頁的數據條數獲取的是下方分頁闆塊中的【每頁數據條數】的默認值：

【每頁數據條數】除了默認的10條，裡面還有其他的選項：

為了實現修改選項時，能夠根據所選擇的選項改變每頁展示的數據條數，需要給這個下拉框添加【選項改變時】的事件：

這樣當我們切換下拉框的值時，上方列表會根據選項自動展示對應的數據條數：

這裡還有個問題，就是列表是動态的，因此分頁的組件位置應該也是跟着列表動态變化的，所以在切換選項的時候，我們需要調整分頁組件的位置：

這裡我是在中繼器高度的基礎上增加100，剛好就是圖中看到的效果，同樣，在中繼器載入的時候，我們根據下拉選項調整了列表的高度，所以也需要同步調整分頁組件的位置：

這裡在設置每頁數量之後加了一個等待事件，是為了等待中繼器數據加載完成并完成分頁，如果中繼器的數據還沒有加載完成，就移動分頁組件，可能會導緻分頁組件放置的位置不對。

三、分頁

接下來我們來看看分頁組件的其他操作：

【第一頁】很簡單，直接添加【設置當前顯示頁面】的事件，頁面選擇【值】，頁碼設為【1】：

【上一頁】、【下一頁】、【最後一頁】用的也是相同的事件，在【頁面】選項中選擇對應的選項即可：

最後來看看這個頁碼指示器：

這個指示器除了顯示當前的總頁數、所在的頁數，還具有快捷跳轉頁面的功能：

為了使這個指示器能動态顯示總頁數和所在頁數，我們需要在中繼器的每項加載時給這個指示器的輸入框設置文本，文本内容如下截圖，兩個參數我在“進階篇”中講過，前面是顯示當前所在頁數，後面的是總頁數：

接着我們給這個指示器添加事件：

• 獲得焦點時，清空内容，等待輸入頁碼；
• 失去焦點時，顯示所在頁數和總頁數
• 如果輸入不為空且按下了【回車】鍵，則跳轉到所輸入的頁碼的頁面

到這裡整個分頁的功能就做完了。

四、查詢

查詢按鈕比較簡單，隻是得區分場景，由于我們提供了兩個查詢條件，但是查詢時不一定都會輸入，所以需要判斷具體提供了多少個條件：

• 隻提供了姓名，隻按姓名查詢
• 隻提供了年級，隻按年級查詢
• 同時提供了姓名和年級，則按兩個條件查詢

注意添加篩選的時候，不要選擇【移除其他篩選】。

重置很簡單，就是移除所有篩選條件，然後把兩個查詢條件清空或置為默認：

五、添加和修改

删除我就不講了，太簡單，在“進階篇”已經講過了，接下來講講添加和修改。

以下是添加和修改彈窗：

點擊添加時，顯示彈窗，并把所有字段内容清空，下拉選項設置為默認值，并且給變量【add_or_update】設置為【add】，表示我們準備做添加操作：

點擊編輯的邏輯跟添加差不多，不過一般編輯時我們需要填入已有的信息，所以這裡我們給幾個字段填入當前行的數據，并且給變量【add_or_update】設置為【update】，表示我們準備做修改操作，同時需注意，這裡我們還需要先取消所有行的标記（确保不會有其他行被标記），再标記當前行（确保能知道當前準備修改的行）：

接下來是添加、修改彈窗，當我們在彈窗中修改信息或修改選項的時候，對應的值會同步給對應的全局變量：

接下來是保存按鈕的事件：

直接根據【add_or_update】的值來判斷當前是做添加還是修改，如果是添加，直接往中繼器中添加行，如果是修改，則是更新當前标記的行，更新之後，再取消所有行的标記。

添加和修改的數據源直接設為對應的全局變量即可：

最後是取消和關閉按鈕的事件，直接隐藏彈窗并取消所有行的标記即可：

好了，以上就是本次中繼器的實戰項目，如果大家想更好地掌握好中繼器的使用，記得多找一些項目來多做練習即可。

如果文章對你有幫助，不妨點個“收藏”或“喜歡”，也歡迎關注我，一個不務正業的産品經理，感謝閱讀！

本文由 @産品錦李 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部