反饋已提交
網絡繁忙
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。
功能簡介：【輪播器組件】是一種容器，可以將其他各類型組件（不包含輪播器組件本身，不支援組合）拖入【輪播器組件】，並按照一定規則輪播。
注：Tab 頁載入邏輯為懶載入，切換標籤頁時才載入新標籤頁的內容。
注：本文僅為大家介紹「Tab 組件」特有功能，其他屬性不贅述。
組件交互請參見：FVS組件交互屬性 。
組件動畫請參見：FVS分頁間組件動畫 。
組件屬性請參見：FVS組件樣式屬性 。
建立一張「企業戰情室範本」：
在組件區「容器」中點選或拖曳「Tab」組件到畫布，預設顯示「請將組件/組合拖入Tab內，新增的組件/組合可以在Tab標籤頁內自由佈局」。
如下圖所示：
直接拖曳組件區或本頁面中其他組件/組合到 Tab 標籤頁上方，出現提示「釋放進入Tab當前標籤頁」，鬆開滑鼠，即可將其拖入 Tab 標籤頁。
Tab 標籤頁內佈局規則和 絕對畫布 一致：
拖入組件時，組件大小不變。
組件位置若超出標籤頁左/上邊框，則組件拖入後自動對齊左/上邊框；其餘位置則以組件釋放位置為準，支援超出標籤頁右/下邊框。
若組件超出標籤頁右/下邊框，選中標籤頁或標籤頁內的組件，出現橫向/縱向捲軸（預覽時懸浮出現），可捲動查看。
注：標籤頁中支援再次拖入 Tab 組件，但最多支援 3 層 Tab 巢狀。
也支援在組件圖層列表中，拖曳組件圖層順序移入標籤頁，拖入位置預設在標籤頁中心位置。如下圖所示：
組件移出包括以下三種方式：
直接拖曳組件到 Tab 外，出現提示「釋放移出標籤頁」，鬆開滑鼠，即可將其移出 Tab 標籤頁。此時移出的組件位置以釋放位置為準。
在組件圖層列表或 Tab 列表中，直接拖曳組件圖層順序移出 Tab 層級。此時移出的組件位置保持不變。
在 Tab 列表，懸浮組件，點選「更多>移出」即可將組件移出 Tab 。此時移出的組件預設顯示在 Tab 組件右側。
新增 Tab 組件時，自帶一個標籤頁，支援新增多個標籤頁。
右側 Tab 列表中展示所有 Tab 標籤頁和標籤頁內的組件，和左側組件圖層中展示內容一致。
標籤頁支援單獨設定「名稱」、「標題內容」、「邊框背景」、「邊框線」及「圓角半徑」。
「名稱」為實際名，預設值為「標籤頁X_TabX_頁面X」。
「標題內容」為顯示名，預設值為「標籤頁X」。
注1：「標題內容」為 V2.10.0 版本新增。歷史範本的「標題內容」取原「名稱」的值。
注2：Tab 組件名稱、Tab 標籤頁名稱及 Tab 內組件的名稱均不支援重名。Tab 標題內容支援重複。
注3：「標題內容」僅體現在畫布的 Tab 頁籤中，Tab 列表、組件圖層、畫布中頁籤選中、JS 呼叫、交互事件設定的呼叫物件等場景仍使用「名稱」。
在 Tab 列表中，也支援新增標籤頁，支援重新命名、刪除、隱藏、鎖定物件等操作。僅剩一個標籤頁時，刪除標籤頁即刪除 Tab 組件。
支援從下向上拖曳標籤頁，改變標籤頁順序。不支援從上向下拖曳標籤頁，可使用調整層級>下移一層。
選中 Tab 整體，在 Tab 列表下方「內容」配置面板中，可對標籤頁和切頁按鈕進行設定。
勾選「啟動調整鎖定」時，調整 Tab 大小，內部組件大小也會等比例變化。
當範本選擇「行動端」模式且開啟 重佈局 時，Tab 組件支援設標度籤頁內邊距及組件間隙。
勾选「显示切页按钮」，可选择使用「Tab栏按钮」或「导航器按钮」。
Tab欄按鈕設定如下圖所示：
各設定項的具體說明如下表所示：
固定顯示：預覽時，Tab欄按鈕預設顯示在組件上
懸浮顯示：預覽時，Tab欄按鈕預設不顯示，當滑鼠懸浮在輪播組件上時，Tab欄按鈕出現
支援三種樣式：科技樣式、聯排樣式或底線式，差別僅在於按鈕樣式的不同
自然佈局：根據 Tab頁組件/組合名稱的長度和按鈕字號，按照合適的長度自適應顯示 Tab欄，超出輪播器尺寸時，出現翻頁箭頭
等分佈局：根據輪播器組件的長度/高度，以及輪播列表中組件的個數，等分 Tab欄，每個 Tab按鈕的長度一致
樣式範本為「科技樣式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色
按鈕底圖：內建了五種底圖樣式可供選擇，可改變底圖色相
翻頁箭頭：僅當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，支援設定翻頁箭頭。內建了四種箭頭樣式可供選擇，可改變箭頭色相
樣式範本為「聯排樣式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色、按鈕背景的填充顏色以及按鈕的邊框線樣式
圓角：可對 Tab欄按鈕整體設定圓角效果
注：聯排樣式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
樣式範本為「底線式」時，可設定項如下：
按鈕樣式：可分別設定按鈕未選中和選中時，按鈕文字對應的字元顏色、按鈕底線樣式和顏色
注：底線式下，當佈局方式為「自然佈局」且 Tab欄按鈕超出輪播器尺寸時，預設存在翻頁箭頭，不支援設定
導航器按鈕設定如下圖所示：
設定
說明
顯示策略
支援兩種顯示策略：
固定顯示：當預覽該頁面時，導航器按鈕預設顯示在組件上。
懸浮顯示：當預覽該頁面時，導航器按鈕預設不顯示。當滑鼠懸浮在輪播組件上時，導航器按鈕出現。
大小
用於調整導航器按鈕的尺寸大小。
顔色
用於調整導航器按鈕的顔色。
不透明度
用於調整導航器按鈕的透明度。
導航點
控制底部導航點是否出現。
導航器和導航點的位置如下圖所示：
選中「Tab組件」，點選「交互」，支援設定「自動輪播」和「標籤切換事件」。如下圖所示：
「自動輪播」預設開啟，輪播間隔預設為 6000 毫秒。
若不開啟自動輪播，當預覽該頁面時，輪播組件預設顯示輪播列表中的第一個組件。使用者需要透過輪播按鈕方可查看其他輪播內容。
若開啟自動輪播，當預覽該頁面時，根據輪播列表的順序和輪播間隔，循環展示各 Tab 內容。輪播時，滑鼠懸浮輪播器，輪播暫停，滑鼠超過 3s 無位移或移出輪播器，輪播繼續。V2.2.0 之前的版本不支援滑鼠懸浮暫停輪播。
「標簽切換事件」支援的事件類型包括：組件聯動、三維模型動畫和 JavaScript 。更多內容請參見：FVS組件交互屬性 。
當範本選擇「行動端」模式時，預設勾選「開啟滑動切頁」。則行動端預覽時，切換 Tab 有左右滑動效果。
開啟切換動畫後，行動端預覽時，切換 Tab 頁有左右滑動的動畫效果。
開啟滑動切頁後，可實現手勢滑動切換 Tab 頁。
注：V2.6.1 之前的版本中，僅支援「開啟滑動切頁」，不支援配置切換動畫，左右滑動的切換動畫始終存在。
升級 V2.3.1 版本後，舊範本中已有的輪播器組件，相容生成 Tab 組件標籤頁，原有功能均可正常使用。
需要注意的是，若原先輪播器組件未啟動 Tab 欄按鈕，啟動後 Tab 欄內容按照標籤頁實際名稱顯示。
若原先輪播器組件啟動了 Tab 欄按鈕，那麼標籤頁的實際名稱按照 Tab 組件規則生成，但 Tab 欄按鈕顯示的內容仍保持原來的內容。
學習輪播器基礎使用後，推薦您更多進階內容：
滑鼠選中內容，快速回饋問題
滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙