axure商城

【Axure 教程】中繼器中級教程-聯級框

聯級框的制作實際上是中繼器篩選能力的一個進階用法,今天我們就來學習一下怎么制作常用的聯級框吧!這次的交互會比較繁瑣,大家一定要耐心看完哦!

原型展示:https://bo2g12.axshare.com

所需原件:

  1. 中繼器
  2. 文本框

聯級框的制作實際上是中繼器篩選能力的一個進階用法,今天我們就來學習一下怎么制作常用的聯級框吧!這次的交互會比較繁瑣,大家一定要耐心看完哦!

一、文本框

如上圖所示,拖入矩形,模擬輸入框,并填入文字“請選擇”,設置好【懸停】、【選中】、【獲取焦點】的交互樣式;文本標簽作為下拉聯級框的標題,按上圖布局即可得到文本框模型;

二、聯級框

如上圖,拖入三個中繼器,分別命名為【L1】、【L2】、【L3】作為一級、二級、三級的聯級列表,并做好數據填充和【每項加載】的設置,分別將【Item.L1】、【Item.L2】、【Item.L3】賦值給到【L1】、【L2】、【L3】;

在填充數據這一步,建議大家可以像上圖一樣,先用 Excel 做好數據備份,以便后續修改使用,且中繼器數據是支持直接通過 Excel 復制黏貼到中繼器的數據表中的;

三、交互設置

選中【L1】的中繼器,雙擊選中【L1】文本標簽,添加【單擊時】設置切換選中效果的交互動作;

為【選中時】添加設置文本,將【Item.L1】賦值給到【sel_L1】的文本標簽;

同時,向目標對象【L2】中繼器添加篩選,規則為 [[Item.L1==TargetItem.L1]],注意勾選“移除其他篩選”

并且顯示【L2】中繼器,如上圖設置所示;

當【取消選中時】,將【sel_L1】設置為空值,且移除【L2】的篩選,同時隱藏【L2】;

同理可以自己嘗試一下設置【L2】的交互哦~

最后,【L3】的交互就相對簡單一點,同樣,需要設置切換選中的交互動作,但【選中時】僅需將【Item.L3】賦值給到【sel_L3】文本標簽,且【取消選中時】將【sel_L3】設置為空值;

四、細節優化

這個組件的小細節還是比較多的,我就不一一說明了,我就挑幾個來說,首先是聯級框的背景,在選中【L1】時,需要將背景的寬度翻倍,選中【L2】時,背景再加 1.5 倍;

中繼器【L1】的文本標簽【選中時】,除賦值給【sel_L1】外,需同步重置【sel_L2】、【sel_L3】的值;

中繼器【L1】的文本標簽【取消選中時】,隱藏【L2】、【L3】中繼器;


更多內容,微信搜索“愛學兒”,一起交流探討吧!

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

【Axure 教程】中繼器中級教程-下拉搜索

2021-6-2 10:23:52

高級教程

MAC安裝Axure后打開提示:“Axure RP 9.app已損壞,無法打開。”的解決辦法

2021-6-7 14:40:55

axure商城
14 條回復 A文章作者 M管理員
  1. ????峰????

    有地方可以下載原型嗎? 剛學很懵。。。

  2. 淡影

    好吧,你這個中繼器存的根本不是上面那個表格吧,另外劃分過了的,第一個存省,第二個存省、市,第三個存市、區

    • SamDesigner

      是的,你理解是對的,這里用了三個中繼器

  3. 淡影

    怎么去重?Item.L1不是第一列嘛,不是很多重復的

  4. dandan1

    666666666

  5. ??108324

    dd

  6. NanJn

    66666666666

  7. 博麗靈夢

    但是我不知道你是怎么把中繼器內容變成這種模式的

    • SamDesigner

      變成哪種模式?這里其實就是三個聯級框放在一塊而已

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo