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

一、前期準備

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

二、效果展示

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

三、正文（制作過程）

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

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

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

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

3. 信息刪除

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

四、信息增加

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

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

給彈框的【新增】按鈕添加鼠標點擊事件：

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

添加綁定信息

姓名綁定

性別綁定

備注綁定

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

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

字符為空提示

不為空成功添加

給輸入文本框獲取焦點時隱藏提示語句

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

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

彈框隱藏，點擊新增顯示：

新增與彈框綁定

4. 信息篩選

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

（1）性別：女

條件添加

篩選添加

（2）性別：男

條件添加

篩選添加

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

取消篩選

總結(jié)

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

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

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

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

導(dǎo)語：今天，本文作者和大家分享一下如何通過Axure實現(xiàn)網(wǎng)站Tab導(dǎo)航欄切換內(nèi)容頁和返回頂部交互，希望看后對你能有所幫助。

我們在使用知乎時，會發(fā)現(xiàn)向下滾動頁面，網(wǎng)站Tab導(dǎo)航欄會發(fā)生內(nèi)容切換；同時滾動超過一定距離，會出現(xiàn)回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。

一、實現(xiàn)邏輯

1. 向下滑動頁面，Tab導(dǎo)航欄由第一種狀態(tài)切換成第二種狀態(tài)；向上滑動頁面，Tab導(dǎo)航欄由第二種狀態(tài)切換成第一種狀態(tài)；
2. 頁面滑動一定距離，顯示回到頂部按鈕，點擊回到頂部按鈕，頁面向上滾動回到頁面頂部。

二、頁面構(gòu)建元件準備

頂部欄兩種狀態(tài)及下滑頁面準備，我是通過截圖的方式準備的：

回到頂部按鈕、鼠標移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：

三、添加交互事件

將頂部欄的兩種狀態(tài)分別放入動態(tài)面板中的狀態(tài)1與狀態(tài)2中，將動態(tài)面板命名為statusBar；

添加鼠標移入回到頂部按鈕顯示”回到頂部”氣泡：

添加向下、向上滑動頁面，頂部狀態(tài)欄切換；

其次，對窗口添加交互：

將“回到頂部-總”組合轉(zhuǎn)為動態(tài)面板，將該動態(tài)面板命名為“回到頂部-總panel”，固定動態(tài)面板顯示位置，并隱藏：

添加錨點元件，我們在此選擇熱區(qū)元件，因為熱區(qū)具有透明的特性，將其命名為TopLocation：

為“回到頂部”按鈕增加交互，鼠標移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設(shè)置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。

四、最終效果展示

五、補充知識

在上面交互的應(yīng)用中，我們會用到Window.scrollY函數(shù)，該函數(shù)為窗口函數(shù)；窗口函數(shù)一共包括以下四種：

1. Windows.width：獲取瀏覽器的當前寬度。
2. Windows.height：獲取瀏覽器的當前高度。
3. Windows.scrollX：獲取瀏覽器的水平滾動距離。
4. Windows.scrollY：獲取瀏覽器的垂直滾動距離。

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

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