本文是模擬微信的第三篇，本次模擬的主要內(nèi)容是利用中繼器和LVAR.indexOf(”)函數(shù)實(shí)現(xiàn)模糊查詢。除了模糊查詢，筆者還對(duì)之前兩個(gè)版本的原型進(jìn)行了進(jìn)一步的優(yōu)化，大家可以下載自行研究。

效果圖

模糊查詢可以根據(jù)用戶的名稱和用戶的消息內(nèi)容進(jìn)行查詢。

制作原理

LVAR.indexOf(‘A’)函數(shù)

LVAR表示在哪兒搜索。

A表示搜什么，如果A直接是文本，需要在兩側(cè)加上”，如果A是變量，則不需要”。

本案例的LVAR是中繼器對(duì)應(yīng)的字段，A是局部變量。

LVAR.indexOf(‘A’)>-1

注意，該函數(shù)返回的位置是從0開(kāi)始的，也就是說(shuō)，如果在第1個(gè)字就出現(xiàn)了，那么返回值是0，第2個(gè)字出現(xiàn)了，那么返回值是1，那我們只要讓該函數(shù)大于-1，就可以查詢每一個(gè)文字。

||

兩條豎線代表或，A||B表示A條件和B條件滿足任意一個(gè)即返回1。

操作步驟

我們創(chuàng)建一個(gè)中繼器在里面添加數(shù)據(jù)，添加用戶頭像，用戶名稱name，用戶最新消息message和用戶消息的時(shí)間。這個(gè)過(guò)程不做細(xì)節(jié)講解，直接上圖就是了。

接下來(lái)，我們制作一個(gè)搜索條件輸入框，制作一個(gè)搜索按鈕，把做好的中繼器放在搜索框下邊，本案例中為了模擬微信效果，我們對(duì)中繼器進(jìn)行了隱藏，如下圖：

選擇輸入框，選擇交互，點(diǎn)擊提示，設(shè)置提交按鈕，提交按鈕的作用是，使用Enter就等同于點(diǎn)擊提交按鈕。

我們?cè)O(shè)置輸入框的提交按鈕為上圖中的搜索按鈕，如圖所示：

選中搜索按鈕，設(shè)置交互，點(diǎn)擊添加篩選，選擇中繼器，名稱可以隨意設(shè)置，規(guī)則設(shè)置為[[Item.Name.indexOf(A)>-1||Item.message.indexOf(A)>-1]]

解釋一下這個(gè)函數(shù)，雙豎線的前一段表示在中繼器Name字段中搜索變量A；同樣，雙豎線后一段表示在中繼器message字段中搜索變量A。

我們繼續(xù)看下邊的局部變量，局部變量對(duì)A賦予了含義，A表示搜索框的文本。

這樣一來(lái)，我們這里的函數(shù)就實(shí)現(xiàn)了在中繼器的名稱name字段和消息message字段內(nèi)搜索輸入框輸入的內(nèi)容。如下圖：

這樣，我們就可以同時(shí)對(duì)名稱和消息內(nèi)容進(jìn)行模糊查詢。

在本案例中，我們還增加了很多置頂和隱藏顯示以及清空文本的交互，這是為了滿足整體的交互體驗(yàn)而做的，大家可以自行研究。

結(jié)語(yǔ)

每一期的原型都會(huì)保留之前的交互，因此只要下載最新一期的原型即可涵蓋之前設(shè)置的交互。

下載鏈接：https://pan.baidu.com/s/10odOHiqq_q5o4B8DmI7G_Q

密碼：mqk3

（溫馨提示：該文件需要使用Axure 9打開(kāi)）

#專欄作家#

王得宇A(yù)IPM；公眾號(hào)：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家

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

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