在Axure中中繼器是一個(gè)神奇的東西，最近在處理列表的時(shí)候使用到了中繼器的增、刪、查?，F(xiàn)在對(duì)于這個(gè)模塊做一個(gè)簡(jiǎn)單的教程。算是之前想做Axure系列的學(xué)習(xí)筆記的開始吧。

一、前期準(zhǔn)備

• 電腦：mac和win都可以（案例以win系統(tǒng)為例，mac類似）
• 軟件：Axure 8.0（如需軟件可以文章后面留言）
• 熟練程度：初級(jí)（會(huì)使用簡(jiǎn)單的元件即可）
• 相關(guān)使用元件：矩形、按鈕、中繼器、文本框，多行文本框、下拉列表框。

二、效果展示

效果展示：https://ksyyq0.axshare.com

三、正文（制作過程）

1. 搭建初始靜態(tài)界面

在靜態(tài)界面的搭建中會(huì)使用到前期準(zhǔn)備中所提及的元件以及相關(guān)屬性。這些都是比較基本的操作，就部一一解釋了。搭建后的界面如下圖，所用元件也做了詳細(xì)命名處理，大家可以看命名后綴進(jìn)行一些元件的區(qū)分。

2. 中繼器關(guān)聯(lián)相關(guān)初始數(shù)據(jù)

中繼器的相關(guān)初始數(shù)據(jù)都可以在Axure中前期錄入部分?jǐn)?shù)據(jù)。錄入數(shù)據(jù)后需要將數(shù)據(jù)與之前中繼器中的文本進(jìn)行綁定。（如果有些數(shù)據(jù)為相關(guān)同的數(shù)據(jù)，就可以不用關(guān)聯(lián)，直接復(fù)用，具體可以自行查看中繼器基礎(chǔ)知識(shí)）。

3. 信息刪除

這一步主要操作為信息的刪除，主要以刪除行為例。

四、信息增加

1. 本步主要主要操作為信息的增加

思路：初始加載隱藏彈框，在點(diǎn)擊上部新增的時(shí)候進(jìn)行彈框顯示，輸入相關(guān)信息，然后點(diǎn)擊新增，信息添加入表格，彈框隱藏。

給彈框的【新增】按鈕添加鼠標(biāo)點(diǎn)擊事件：

2. 為行中的數(shù)據(jù)綁定輸入源

添加綁定信息

姓名綁定

性別綁定

備注綁定

3. 優(yōu)化數(shù)據(jù)添加邏輯——姓名不能為空

思路：在新增按鈕點(diǎn)擊新增時(shí)判斷姓名文本框中是否有字符的輸入，如果沒有就在姓名輸入欄下顯示【姓名不能為空】提示，如果有字符輸入就直接添加成功，彈框隱藏。

字符為空提示

不為空成功添加

給輸入文本框獲取焦點(diǎn)時(shí)隱藏提示語句

最后為【新增】【取消】添加隱藏時(shí)間（注意，新增的隱藏事件要添加到輸入不為空的情況下）：

這些內(nèi)部邏輯處理完成后，只需綁定彈框到頂部新增就行。

彈框隱藏，點(diǎn)擊新增顯示：

新增與彈框綁定

4. 信息篩選

思路：讓下拉菜單中選中項(xiàng)作為條件，來協(xié)助篩選按鈕的事件處理

（1）性別：女

條件添加

篩選添加

（2）性別：男

條件添加

篩選添加

全選（取消篩選） 利用中繼器的取消篩選：

取消篩選

總結(jié)

1. 命名：可以讓自己更方便的區(qū)分組件，找到組件。
2. 邏輯先后：在做原型之前，一定要想清楚邏輯，什么在前什么在后（包括判斷條件）。
3. 排版：盡可能的去做一些規(guī)范，在使用元件時(shí)大小、高度都有一些約束，這樣排版就會(huì)相對(duì)美觀些。

原型下載：https://share.weiyun.com/5XSJSTX

本文由 @Brose 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。