Axure 選擇不同內容, 跳轉頁面中加載不同內容


這次項目中遇到了這樣的場景

A,B,  C三個不同的業務場景,每個業務場景下包含多個子項;

可以通過選中單個或者多個場景,下一步時,根據選擇的場景,加載不同的內容;例如:選擇A場景,只加載場景A的子項和公共的子項內容;選擇A+B,則下一個頁面只加載A的子項+B的子項+公共子項;

效果如下:選擇A,點擊下一步,展示A+公共組件;

 

選擇A+B,點擊下一步,展示A+B+公共組件;

 

第一步:首先,新增兩個html頁面,頁面1中設置三個點擊框;頁面2,因為選擇不同的內容展示不同的內容,所以需要用動態面板設置多個組合展示內容;

頁面1:STEP1-選擇入口,三個選擇框,下一步按鈕用來切換至下一頁;

 

頁面2:STEP2-加載內容;這里要用動態面板,把A/B/C以及他們的排列組合效果都列出來;在實際的繪制過程中,可以只做幾個效果也可以;

 

 

 第二步:設置A/B/C切換選中狀態,即:設置選中狀態為【toggle】;為了設置一個鼠標移入和選中的變化效果;鼠標懸停,則方框的樣子,選中后,方框的樣子;

 

 

 

 

第三步:A,B,C任意選擇及組合,對應下一步加載不同的內容;要向實現這個效果,需要用到全局變量以及條件設置;

全局變量的設置:設置A選中時,全局變量a=1,取消選中時,全局變量a=0;

                             設置B選中時,全局變量b=2,取消選中時,全局變量b=0;

                             設置B選中時,全局變量c=3,取消選中時,全局變量c=0;

下面例子是以A為例子,設置全局變量;

 

 第四步,在STEP2-加載內容中,采用【頁面載入時】來設置不同的變量情況下,顯示不同的動態面板內容;

頁面載入時,鼠標放置在頁面空白處,然后添加名稱為【頁面載入時】的用例;直接上用例;

這里也是嘗試過n次,然后用條件編輯的方式if,elseif,最終實現的;

如果變量值a=1,且b=0且c=0,則動態面板加載顯示面板A;(a選中,b未選中,c未選中)

如果變量值a=0且b=2且c=0,則動態面板加載顯示面板B;

如果變量值a=0,且b=0且c=3,則動態面板加載顯示面板C;

如果變量值a=1且b=2且c=0,則動態面板加載顯示面板AB;

如果變量值a=1,且b=0且c=3,則動態面板加載顯示面板AC;

如果變量值a=0且b=2且c=3,則動態面板加載顯示面板BC;

如果變量值a=1,且b=2且c=3,則動態面板加載顯示面板ABC;

按照這個執行下來,就可以滿足預想的效果了;

以上;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM