實現的效果:點擊tab,切換對應的內容頁面,指示標識移動到對應選中tab。
思路:
①通過動態面板實現內容頁面切換,n個tab設置n個狀態;
②指示標識通過位移,移動到對應的位置;
③綁定tab按鈕的點擊事件,設置動態面板的狀態切換,以及指示標識的移動位置。
開始吧 :)
1、首先,添加頁面佈局,如下圖
2、爲動態面板添加狀態頁面,n個Tab,增加n個狀態頁。我設置了3個Tab,增加了3個對應的狀態頁,並且重命名,命名要容易區分,因爲接下來即將對它進行編輯。
爲狀態頁面添加內容,爲了看出切換效果,每個頁面的內容不要一樣。
準備工作做完,以下即將開始劃重點。
3、爲tab按鈕綁定點擊事件。
點擊事件有2個:1、動態面板狀態切換;2、指示標識位置移動。這個2個事件的沒有順序要求,隨意。
先簡單介紹以下動態面板切換
爲了將tab1和麪板狀態page1關聯,在設置面板狀態時,需要選擇page1,動畫效果和動畫時長按需選擇(同理,如果是tab2,要選擇page2。所以面板狀態的命名要容易識別,用途就在這裏~)如下圖。
重點中的重點,就是元件的位移~
元件位移,在設置用例當中,有個“移動”的操作。選中需要移動的元件——命名爲“指示標識”的元件(元件的命名方便在操作元件時快速識別)。
需要編輯設置的條件:參考座標系(相對位置、絕對位置)、位移的位置(x、y)、動畫效果(非必須),如下圖;
名詞釋義:
絕對位置:是以當前容器的位置(x,y)作爲原點(0,0);
相對位置:是以自己上一次的位置(x,y)作爲原點(0,0)。
1)參考座標系
選擇絕對位置。如果設置相對位置,會發現位移的位置產生了神奇的偏差,在原來的位置上,疊加xy的值,比如最初的位置是(2,2),設置位移x=5,y=5,不會移動到(5,5)的位置,而是移動到(7,7)的位置。
2)設置X、Y的位置。
先了解一下以下即將用到的函數的含義(以下函數解釋內容來自axure非官方中文網:https://www.axure.com.cn/5068/)
This :獲取當前元件對象。當前元件是指當前添加交互動作的元件。
Target :獲取目標元件對象。目標元件是指當前交互動作控制的元件。
width :獲取元件對象的寬度值。
height :獲取元件對象的高度值。
top :獲取元件對象的上邊界座標值。
left :獲取元件對象的左邊界座標值。
right :獲取元件對象的右邊界座標值。
bottom :獲取元件對象的下邊界座標值。
以tab1按鈕爲例說明以上元件函數的意思,看下圖標註:
1、tab1按鈕綁定點擊事件,在點擊事件的用例情境裏,tab1是This;
2、指示標識,是tab1通過點擊事件,需要控制其進行位移操作的,所以是目標元件,即Target;
3、tab1按鈕左邊距離畫布左邊緣的距離:left;
4、tab1按鈕右邊緣距離畫布左邊的距離:right;
5、tab1按鈕上邊緣距離畫布頂部的距離:top;
6、tab1按鈕下邊緣距離畫布頂部的距離:bottom;
瞭解以上函數的含義後,看看我們需要什麼數值, 又可以獲取到什麼數值。
移動指示標識,需要明確每次移動指示標識的x,y。
指示標籤顯示在tab標籤的水平居中位置,指示標識永遠是跟隨tab標籤的,點擊哪個tab標籤跟着移動到哪個tab標籤的下方,可以根據tab標籤的位置,進行計算位置。
1、首先先確定指示標籤的y值。
因爲指示標識是在水平位置上移動,所以y值是固定的,獲取tab標籤的底部位置=tab.bottom;佈局界面中標識和tab之間3個單位的間隔,所以指示標識距離畫布頂部的距離y=tab.bottom+3,即y=This.bottom+3;
2、x的值稍微複雜一點,由2部分組成:
1)tab標籤左側距離畫布左側的距離=tab.left;
2)tab標籤和指示標識居中顯示時,指示標籤左側距離tab標籤左側的距離=tab標籤寬度的一半減去指示標識寬度的一半,即tab.width/2-指示標籤.width/2;所以指示標籤距離畫布左側的距離x=tab.left+tab.width/2-指示標識.width/2,即x=This.left+This.width/2-Target.width/2;
完美的獲取到了指示標識的x,y值,接下來,就是設置到用例中。點擊fx和fy分別編輯x,y的值,如下圖:
其基本語法是用雙方括號包含,變量值和函數用英文句號連接,例如:[[This. width]] 當前元件的寬度
變量值和函數不要拼寫錯誤,大小寫不敏感~
y值同理。
總結:
1、tab按鈕添加點擊事件;
2、觸發動態面板切換狀態;
3、指示標識進行位移操作。
元件函數:
絕對位置:是以當前容器的位置(x,y)作爲原點(0,0);
相對位置:是以自己上一次的位置(x,y)作爲原點(0,0)。
This :獲取當前元件對象。當前元件是指當前添加交互動作的元件。
Target :獲取目標元件對象。目標元件是指當前交互動作控制的元件。
width :獲取元件對象的寬度值。
height :獲取元件對象的高度值。
top :獲取元件對象的上邊界座標值。
left :獲取元件對象的左邊界座標值。
right :獲取元件對象的右邊界座標值。
bottom :獲取元件對象的下邊界座標值。