<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        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已損壞,無法打開?!钡慕鉀Q辦法

        2021-6-7 14:40:55

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

          sel_L1是啥????

        2. 穩穩的幸福

          標簽怎么聯動呢

        3. TinrayYAO

          sel_L1是指中繼器里面的矩形么?

        4. 悟空144189

          可以,跟著做出來了

        5. 呂雪瑩

          中繼器的這個選項要取消,否則無法實現【單擊切換選中狀態】

          • SamDesigner

            是的,選項組要做隔離

        6. 呂雪瑩

          感謝教程,但是確實不怎么清楚,看了評論才發現是要去公眾號付費。

          • SamDesigner

            嗯,付費即可獲得即插即用的元件

        7. 廖

          沒看懂中繼器怎么設置的

        8. ????峰????

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

        9. 淡影

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

          • SamDesigner

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

        10. 淡影

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

          • Threeapples

            重復的問題有解決方案嘛~ 我也遇到了重復的情況

          • Threeapples

            我遇到了和你一樣的問題,有解決方案嘛~~

          • SamDesigner

            用 Excel 的篩選,過濾后,再復制黏貼到中繼器

        11. dandan1

          666666666

        12. ?108324

          dd

        13. NanJn

          66666666666

        14. 博麗靈夢

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

          • SamDesigner

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

        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>