起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識中繼器實現(xiàn)列表篩選案例小教程
編輯導(dǎo)語：在上一篇文章中，作者為我們分享了《axure動態(tài)面板如何實現(xiàn)滑動解鎖》。在這篇文章中，作者又通過實際操作為我們分享——中繼器如何實現(xiàn)列表篩選的小教程，讓我們一起來思考學(xué)習(xí)吧。
這是一個關(guān)于中繼器實現(xiàn)列表篩選數(shù)據(jù)交互效果的小案例，以下是預(yù)覽效果鏈接：https://jipr1h.axshare.com。
一、第一步：準(zhǔn)備相關(guān)元件
【患者姓名的搜索文本框】、【表頭】、【中繼器】，如下圖（其余元件可不加，這里只是為了好看，好看）
二、第二步：為中繼器添加模板
1. 雙擊中繼器，進(jìn)入操作頁面；
2. 操作頁面中已有一個矩形框，這里我們可將它刪掉，拖入一個矩形框（代表一行表格），拖入幾個文本框，分別命名為xingming、xingbie、bianhao、shijian、leixing（注意：這里命名的文字一定要是數(shù)字或字母，不可為中文，我這里是拼音；且拖入后，文本框中的文字要刪掉）；
3. 拖入元件后，進(jìn)行邊框、顏色的設(shè)置（這里為了美觀）。
三、第三步：為中繼器添加數(shù)據(jù)
如上圖所示，在檢視-屬性頁面，為數(shù)據(jù)集的表格添加數(shù)據(jù)，并進(jìn)行命名。
四、第四步：綁定
選中中繼器，在檢視-屬性頁面，雙擊【每項加載時】，添加【設(shè)置文本】的用例，將第二步中添加的文本框與第三步添加的數(shù)據(jù)列依次進(jìn)行綁定，例如：將文本框“xingming”與數(shù)據(jù)列中的‘xingming’進(jìn)行綁定，如下圖：
綁定后點擊確定即可。
綁定后預(yù)覽圖如下：可以看到，顯示的數(shù)據(jù)就是我們在中繼器中添加的。
五、第五步：添加交互
選中文本框，添加【文本改變時】的交互用例，為中繼器添加動作【添加篩選】，如下圖，
然后點擊fx插入函數(shù)頁面，在輸入函數(shù)之前，先添加一個局部變量，如下圖，選擇當(dāng)前元件（插入變量部分的函數(shù)這一步可先忽略，這是下一步的）。
添加局部變量后，點擊插入變量或函數(shù)，選擇Item.xingming，然后繼續(xù)插入字符串函數(shù)indexOf（這里填添加的局部變量.text），具體公式為[[Item.xingming.indexOf(LVAR1.text)>=0]]，表示姓名列的數(shù)據(jù)中包含文本框所輸入的文本。
然后點擊確定，進(jìn)行預(yù)覽；可以看到，當(dāng)輸入“馬”時，下方列表立馬篩選出姓名列包含馬字的數(shù)據(jù)；
六、第六步：額外的設(shè)置
以上文本篩選就設(shè)置完成了，這里加一個空白文本的顯示；當(dāng)列表中【備注】一欄為空白時，設(shè)置顯示 ——；
選中中繼器，添加【每項加載時】的交互用例2，添加條件：類型一列的【值】=【值】為空白，即【值】[[Item.leixing]]==【值】“ ”，如下圖：
點擊確定后，添加【設(shè)置文本】的用例，選擇中繼器的leixing列，設(shè)置文本的值為——，如下圖：
設(shè)置完點擊確定，預(yù)覽如下圖：
以下為免費下載鏈接：
鏈接：https://pan.baidu.com/s/1u5F71uWIOfL7GwuH1j6LDw
提取碼：63um
以下為用中繼器、動態(tài)面板、內(nèi)聯(lián)框架等制作的閱讀app原型交互案例的下載鏈接：https://www.axureshop.com/a/1467933.html
有需要系統(tǒng)學(xué)習(xí)的可下載~
本文由 @啦啦啦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pexels，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
