這次項目中遇到了這樣的場景
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;
按照這個執行下來,就可以滿足預想的效果了;
以上;