[通用]行動端Tab塊切換

1.1 版本

1.2 應用場景

在決策報表行動端使用中希望實現滑動 Tab 塊內容即可切換 Tab 標籤頁的效果。

勾選「支援滑動切換」後，無需點選或滑動 Tab 標題，滑動 Tab塊 內容即可實現滑動切換 Tab 標籤頁，效果如下圖所示：

2.1 功能入口

1）點選下載範例範本：組件多樣化.frm 在設計器中開啟。

2）點選右側「組件設定>tabpane0」，選擇「行動端」。

3）行動端面板下新增 Tab 滑動切換相關的 3 個設定項，如下圖所示：

• 顯示標題：預設勾選，取消勾選不會顯示 Tab 標題欄，也就無法透過點選 Tab 標題來切換 Tab 塊。

• 支援滑動切換：預設不勾選，勾選後可以左右滑動 Tab 內容切換 Tab 塊。

• 顯示圓點指標：預設不勾選，勾選後可以顯示圓點指標，有幾個 Tab 塊就有幾個圓點，切換到哪個 Tab 塊，對應的圓點會高亮。

2.2 顯示標題

1）「顯示標題」控制是否顯示 Tab 標題欄。

2）取消勾選「顯示標題」，標題則不顯示；勾選「顯示標題」，標題顯示，可透過點選標題切換 Tab塊，效果如下圖所示：

2.3 支援滑動切換

1）「支援滑動切換」控制預覽時是否可以左右滑動 Tab 內容來切換 Tab 塊。

2）取消勾選「支援滑動切換」，不可透過滑動Tab 內容切換Tab 標籤頁；勾選「支援滑動切換」後，可透過滑動Tab 內容切換Tab 標籤頁，效果如下圖所示：

2.4 顯示圓點指標

「圓點指標」即提示有幾個 Tab 塊，切換到哪個 Tab 塊，對應的圓點會高亮。

勾選之後會出現 3 個設定項，分別如下：

• 顯示方式：提供了 2 種方式，差別在於顯示效果不同。

• 初始填充：Tab 塊對應圓點的初始填充色。

• 選中填充：Tab 塊對應圓點的選中填充色，即高亮色。

注1：行動端樣式範本選擇「滑動式」時，圓點的初始填充色和選中填充色按照「滑動式>tab樣式」的設定生效，此處的「初始填充」和「選中填充」設定不生效。

注2：不能使用圓點指標來滑動切換 Tab 塊，它只是作提示用。

2.4.1 顯示方式

若顯示方式選擇「佔位顯示」，圓點指標則顯示在 Tab 塊內容外面；

若顯示方式選擇「懸浮顯示」，圓點指標則懸浮在 Tab 塊內容上方，如下圖所示：

2.4.2 顯示位置

不同樣式範本下圓點指標的顯示位置如下表所示：