axure商城

【Axure 教程】中繼器中級教程-左側導航

相信經過前面的 6 篇入門教程,大家已經對中繼器有一定的入門了解,那么今天我們進一步學習如果使用中繼器制作我們經常用到的左側導航

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

所需原件:

  1. 中繼器
  2. 文本標簽

相信經過前面的 6 篇入門教程,大家已經對中繼器有一定的入門了解,那么今天我們進一步學習如何使用中繼器制作我們經常用到的左側導航;

一、導航制作

如上圖所示,拖入 6 個文本標簽,其中一個作為一級導航默認顯示狀態,其余 5 個作為二級導航,且設置成組并默認隱藏狀態;

同時,在中繼器的數據表中進行賦值設置,在這里,我以“N 1”作為一級菜單,“N1_1”作為二級菜單的第一個選項,以此類推來設置其余的 5 個二級菜單;

二、交互設置

如上圖所示,我們設置【點擊】一級菜單時,切換顯示和隱藏二級菜單,同時在更多選項中設置【推拉】下方組件,預覽即可看到點擊一級菜單時,會展開二級菜單,并使下方的其余菜單往下移動;

三、細節優化

在完成步驟二的交互設置后,我們會發現如果二級菜單為空值,菜單也會展示,這樣就無法達到我們預期的理想狀態,所以需要為二級菜單增加【載入時】如果二級菜單為空值,那么隱藏該菜單,且拉起下方組件,如上圖的設置所示;

此外,我們需要為二級菜單設置一個選中狀態,并在點擊時將該二級菜單設置為選中;

設置完成后,我們選中所有二級菜單并將它們設置為【二級菜單】的選項組,這樣就可以讓我們在做二級菜單的選中時,達到“單選”的效果;


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

給TA買糖
共{{data.count}}人
人已贊賞
軟件資訊

Axure中文網恢復投稿 以及現金稿費獎勵機制

2021-5-25 9:45:58

基礎教程軟件資訊

使用Axure設計工具提升效率的8個技巧

2021-7-5 17:07:28

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

    用的axure8 始終沒看懂“二級菜單為空值,那么隱藏該菜單”是如何設置的??

    • SamDesigner

      設置情形:If [Item.N1_1] 的值為“空(不填內容)”,那么隱藏當前組件,且拉動下方組件

    • zmykzjx

      感謝老師,設置在二級菜單交互的“顯示”上可以了。非常感謝????

    • gentle

      老師好,我用的Axure9,無論怎么調試情形,都沒辦法隱藏沒有數據的矩形,只能把數據隱藏掉,請問是我的版本有問題嗎?

    • SamDesigner

      歡迎微信關注愛學兒通過圖文方式交流解答,謝謝理解

  2. ??大笨鐘

    三級菜單怎么實現,求教

    • SamDesigner

      三級的設置方式跟二級的差不多,我今晚再發布一遍結構樹的教程,跟三級菜單原理是一樣的,可以留意一下。: )

  3. 張麗嬌

    只能說這種方法可以實現效果,無法實現真正的動態數據

    • SamDesigner

      怎么理解“無法實現真正的動態數據”?我個人認為是可以的喔

    • SamDesigner

      我好像有點理解了,您的意思是,如果你的二級菜單多于 5 個,還需要再次調整的意思吧?或許,兩個中繼器組合一起來用,就可以解決這個問題,可以嘗試一下

    • SamDesigner

      剛看了一下,中繼器內禁止嵌套中繼器,這條路走不通,所以,暫時沒有別的更好的方法了,建議就是先給二級菜單設置一個最大值,比如 10 個,那么還是比較通用的,根據實際使用場景進行靈活調整吧

  4. 張麗嬌

    怎么設置二級菜單的值呢?

    • SamDesigner

      “N1”是一級菜單的值,“N1_1”、“N1_2”、“N1_3”、“N1_4”、“N1_5”就是對應的二級的值

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