axure中繼器實(shí)現(xiàn)實(shí)時(shí)搜索

中繼器雖然不常用，但是很有用，真的很有用。中繼器是漢譯之后的稱呼，英文原指repeat，就是重復(fù)。可以理解為連續(xù)重復(fù)的項(xiàng)。本文教大家利用axure中繼器實(shí)現(xiàn)實(shí)時(shí)搜索。

axure中繼器實(shí)現(xiàn)實(shí)時(shí)搜索步驟

首先我們新建一個(gè)原型，拉入iPhone的mockup框架，并在上面拉入一個(gè)內(nèi)聯(lián)框架，雙擊該框架，將鏈接接入相應(yīng)的頁面，這樣的操作，能讓我們更加專注于頁面內(nèi)的內(nèi)容創(chuàng)作，但在原型演示時(shí)，又具備一定的視覺效果。具體操作見下圖：

事前準(zhǔn)備工作

接下來，我們開始創(chuàng)建基本的內(nèi)容頁，我們想將頁面中的元素，按照需求，先搭建完善：

內(nèi)容頁的搭建

1、對(duì)于每一個(gè)App，尤其是IOS來講，導(dǎo)航欄一般是必備；

2、接著，我們創(chuàng)建一個(gè)搜索框，在這里，我們通過矩形+素材圖片+一個(gè)文本框構(gòu)建這個(gè)部件：

輸入框的構(gòu)建

在這里，我們需要對(duì)文本框做一下屬性的調(diào)整：

3、我們利用之前所講，搭建一個(gè)簡(jiǎn)單的列表，用以展示用戶列表。下一步，我們就正式開始今天的教學(xué)，如何利用中期的篩選，實(shí)現(xiàn)對(duì)文本框的輸入，來動(dòng)態(tài)顯示相關(guān)的內(nèi)容。在這個(gè)過程中，涉及到的技術(shù)點(diǎn)是如何對(duì)中繼器進(jìn)行篩選操作。我們先選中“輸入框”這個(gè)文本框，創(chuàng)建一個(gè)“文本改變時(shí)”的用例，這個(gè)用例由兩部分組成：1、判斷輸入的文本是否大于等于1，如果是，則開始中創(chuàng)建好的中繼器中進(jìn)行篩選動(dòng)作，查找輸入的字是否有相關(guān)的內(nèi)容，否則，則清除篩選條件，重置中繼器的初始狀態(tài)：

用例的創(chuàng)建1

用例的創(chuàng)建2

需要特別說明的是，在這個(gè)用例中，我們?yōu)榱藵M足需求，創(chuàng)建了一個(gè)臨時(shí)變量，用來控制輸入文本的長度，這個(gè)看起來有些復(fù)雜，事實(shí)上，我們?cè)谠偷膭?chuàng)作中，用到這種操作的不在少數(shù)，所以建議大家多了解了解，在以后的教程中，也會(huì)穿插類似的一些簡(jiǎn)單操作。