中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在涌動(dòng)端APP里，字母定位和模糊搜索是常用的快速找到對(duì)應(yīng)內(nèi)容的方式。本文作者以移動(dòng)端通訊錄為案例，分享如何在Axure中實(shí)現(xiàn)字母定位+模糊搜索的交互效果，一起來(lái)看一下吧。

在移動(dòng)端APP里字母定位和模糊搜索是常用的快速找到對(duì)應(yīng)內(nèi)容的方式，今天作者就以移動(dòng)端通訊錄為案例，教大家如何在Axure中實(shí)現(xiàn)字母定位+模糊搜索的交互效果：

原型地址：https://3ipx79.axshare.com

本案例教程主要使用中繼器來(lái)制作人物列表，所以制作完成后再次使用也非常方便，我們?cè)谥欣^器表格里填寫(xiě)對(duì)應(yīng)的信息既可以自動(dòng)生成交互效果，所以推薦給大家使用，下面我們就一起開(kāi)始學(xué)習(xí)制作吧~

一、人物信息列表的制作

我們用到中繼器，在中繼西放置一個(gè)底部白色底部矩形、一個(gè)圖片元件（對(duì)應(yīng)人物頭像）、一個(gè)文本標(biāo)簽（對(duì)應(yīng)人物名稱(chēng)），如下圖所示擺放即可：

在中繼器表格里，我們插入對(duì)應(yīng)的兩列，分別是name（對(duì)應(yīng)人物名稱(chēng)）和picture（對(duì)應(yīng)人物頭像），我們?cè)谥欣^器表格里填寫(xiě)好名稱(chēng)，和導(dǎo)入對(duì)應(yīng)的頭像圖片：

在中繼器每項(xiàng)加載時(shí)設(shè)置交互，用設(shè)置文本的交互，將表格中name列的值設(shè)置到文本標(biāo)簽里，然后在用設(shè)置圖片的交互，將表格中picture里的圖片，設(shè)置到圖片元件里。

二、模糊搜索效果的制作

我們需要一個(gè)輸入框，搜索按鈕，取消按鈕，背景矩形，搜索背景矩形，如下圖所示擺放：

因?yàn)橐苿?dòng)端一般不需要點(diǎn)搜索按鈕，所以我們把篩選的交互寫(xiě)在輸入框文本改變時(shí)，我們用添加篩選的交互，對(duì)中繼器進(jìn)行篩選，這里需要用到indexof函數(shù)，TargetItem.name.indexOf(this.text)，看看當(dāng)前文本框輸入的值是是否包含在中繼器表格name列的值里，如果包含在里面，得出的結(jié)果就會(huì)大于-1，所以我們篩選的條件就是要篩選出大于-1的行。

上面這里是最基礎(chǔ)的模糊搜索，如果需要考慮大小寫(xiě)的關(guān)系，例如名稱(chēng)是cat，上面的方式輸入CAT是搜索不到的，如果想實(shí)現(xiàn)不分大小寫(xiě)搜索的話(huà)，toUpperCase函數(shù)，這個(gè)函數(shù)是可以將對(duì)應(yīng)的值全部轉(zhuǎn)為大寫(xiě)，我們可以用這個(gè)函數(shù)將name列的值以及輸入框里的值都轉(zhuǎn)化為大寫(xiě)，這樣就可以做出不區(qū)分大小寫(xiě)的模糊搜索的交互了

這里考慮到?jīng)]有搜索出效果的情況，所以我們?cè)谥欣^器第一行的位置增加文本標(biāo)簽（沒(méi)有文字），至于底層就可以了，剛好用中繼器擋住，如果一行結(jié)果都沒(méi)有出現(xiàn)的話(huà)就會(huì)看到這個(gè)提示文字，如果有數(shù)據(jù)出現(xiàn)，數(shù)據(jù)就會(huì)把它擋住。

如果搜索框要至于頂層的效果的話(huà)，我們就將中繼器和上面的提示文字轉(zhuǎn)為動(dòng)態(tài)面板，然后調(diào)出垂直滾動(dòng)條，或者將搜索區(qū)域的元件轉(zhuǎn)為動(dòng)態(tài)面板，固定的左上角。

這樣之后我們把所有元件組合轉(zhuǎn)為動(dòng)態(tài)面板，狀態(tài)命名為搜索頁(yè)，再新增一個(gè)state，放在最上面，命名為通訊錄，我們?cè)谏厦孀鲎帜付ㄎ坏男Ч?/p>

所以取消按鈕點(diǎn)擊時(shí)，我們?nèi)∠阉骱Y選，這里用設(shè)置文本的交互，將輸入框的值設(shè)置為空即可，然后用設(shè)置面板狀態(tài)的交互，將這個(gè)動(dòng)態(tài)面板設(shè)置到通訊錄的狀態(tài)。

三、通訊錄頁(yè)面的設(shè)置

主要是錨點(diǎn)矩形和中繼器、搜索圖標(biāo)以及A-Z和#號(hào)的文字，如下圖所示擺放：

上面的通訊錄、搜索圖片和背景矩形可以轉(zhuǎn)為動(dòng)態(tài)面板固定在左上角的位置。

鼠標(biāo)點(diǎn)擊搜索按鈕，我們用設(shè)置面板狀態(tài)的交互，設(shè)置整個(gè)動(dòng)態(tài)面板跳轉(zhuǎn)到搜索頁(yè)，就是上面的內(nèi)容了。

下面的部分我們要先用矩形做ABCD……的錨點(diǎn)，然后可以復(fù)制前面做好的中繼器過(guò)來(lái)，將他按照內(nèi)容分開(kāi)，放置到對(duì)應(yīng)錨點(diǎn)的下方。

將他們一一擺放到對(duì)應(yīng)位置后，我們添加A-Z和#號(hào)，將他們轉(zhuǎn)為動(dòng)態(tài)面板，固定到右側(cè)對(duì)應(yīng)的位置。

鼠標(biāo)單擊A字母時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置錨點(diǎn)位于矩形A,增加一個(gè)線(xiàn)性的動(dòng)畫(huà)效果。

鼠標(biāo)單擊B字母時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置錨點(diǎn)位于矩形B，增加一個(gè)線(xiàn)性的動(dòng)畫(huà)效果。

鼠標(biāo)單擊C字母時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置錨點(diǎn)位于矩形C，增加一個(gè)線(xiàn)性的動(dòng)畫(huà)效果。

……

鼠標(biāo)單擊Z字母時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置錨點(diǎn)位于矩形Z，增加一個(gè)線(xiàn)性的動(dòng)畫(huà)效果。

鼠標(biāo)單擊#號(hào)時(shí)，我們用滾動(dòng)到元件的交互，設(shè)置錨點(diǎn)位于矩形#，增加一個(gè)線(xiàn)性的動(dòng)畫(huà)效果。

我們就完成字母定位的效果了。

這樣我們就完成高保真通訊錄原型模板的制作了，以后使用時(shí)只需要在中繼器表格里填寫(xiě)內(nèi)容，調(diào)整位置，就可自動(dòng)生成模糊搜索和字母地位的效果了，是不是很方便呢？

那以上就是用通訊錄搜索案例教程的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)。