Axure高保真原型設計之中繼器模擬查詢

1 評論 3608 瀏覽 3 收藏 5 分鐘

編輯導語：中繼器該怎么模擬查詢？作者從五個方面進行了中繼器的模擬查詢操作，我們一起來看看吧。

先上最終效果圖：

一、以按行政區劃查詢為例

1. 先準備好數據

2. 繪制界面框架

  • 注1：如果所屬地區下拉列表不想顯示后面的行政區劃代碼，可以采用隱藏的中繼器作為下拉列表項實現，此處略；
  • 注2：Axure對于函數的使用非常有限，所以借用了一個隱藏的框“所屬地區列表Value”，初始值為“33”，其后所屬地區下拉框選中項值發生變化時，將所屬地區的值取最后6位數字，表達式為：[[LVDQ.substr(LVDQ.indexOf(‘_’)+1,6).replace(’00’,”)]]（這里使用了字符串的substr函數，同時使用replace函數把后面的“00”去掉）。

這樣設計的目的是為了簡化查詢功能中的邏輯處理（主要還是Axure抽風，后面indexOf函數沒法直把上面的公式放進去）。

3. 功能：為數據列表中繼器添加過濾器

過濾器條件為：[[(Item.sjxzjb==LVJB || Item.sjxzjb==’省級’ || Item.sjxzjb==’地市級’)&& Item.sjqhdm.indexOf(LVDQ)>-1 ]]，目的是當選的顯示省級、地市級，是否要顯示縣級有展示級別“LVJB”決定，同時通過后面的indexOf函數進行過濾，這樣就能夠達到看啥都帶上本級。（不信看最后演示動畫）

4. 分頁功能

（1）每頁顯示數據行數

當然默認中繼器也需要開啟分頁為“多頁”，每頁項“10”，開始頁：“1”。

（2）分頁導航：首頁

設置中繼器當前頁面值為“1”。

（3）分頁導航：上一頁

設置中繼器頁面到上一個。

（4）分頁導航：下一頁

設置中繼器頁面到下一個。

（5）分頁導航：最后一頁

設置中繼器頁面到最后一個（Last）。

（6）分頁導航：手動修改指定頁

手動修改后把中繼器當前修改為修改后的值，這里做下判斷，僅1~總頁數范圍內有效，否則彈出alert進行提醒，Axure中想使用javascript腳本的話，可以使用當前頁面打開鏈接外部地址內容為:javascript:{alert(‘巴拉巴拉…’);}

（7）中繼器的總頁數、當前頁數寫入到分頁欄里

在中繼器每項加載時，設置分頁欄的總頁數[[Item.Repeater.pageCount]]、當前頁碼[[Item.Repeater.pageIndex]]。

5. 最終動畫演示

 

本文由 @ALoong 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
ALoong
1篇作品 3608總閱讀量
01-314146 瀏覽
產品中的這些心理說服模式，會讓你心甘情愿付錢
10-101089 瀏覽
掌握病毒式傳播的藝術——產品經理如何借助社交媒體策略打造爆款
06-213102 瀏覽
畢業季已至，品牌如何撩撥情感搏關注？
11-236203 瀏覽
視頻號和抖音的差距到底有多大？
07-056927 瀏覽
B端設計｜統籌思路
評論
評論請登錄

  1. 原型發一個嘛

    來自安徽 回復