【HarmonyOS】【JS】Tabs如何設置區分TabBar和TabContent的分割線不顯示

【關鍵字】

Tabs，分割線

 

【問題描述】

使用JS開發HarmonyOS應用時，使用Tabs組件，默認自帶TabBar和TabContent的藍色分割線，由於藍色分割線樣式不可設置，若不想要此藍色分割線，如何去除藍色分割線？

 

【問題分析】

1、若JS使用Tabs，藍色分割線爲組件自帶樣式，暫不支持屬性支持顯示與隱藏，通過css或者其他方式都無法去除；

2、不能去除藍色分割線，可以考慮讓其不顯示；分割線內部實現是放置在tab-bar元素內，可通過給tab-bar元素設置高度 & tab-bar中每個頁籤也設置同樣高度，讓頁籤元素的高度剛好爲tab-bar元素高度，藍色分割線不顯示。

 

【問題解決方案】

以此文檔中示例代碼爲例：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-component-tabs-0000001333800649#ZH-CN_TOPIC_0000001333800649__%E5%9C%BA%E6%99%AF%E7%A4%BA%E4%BE%8B

將.tab_bar和.tab_item設置相同高度，tab-bar html代碼如下圖所示：

<tab-bar class="tab_bar mytabs">
    <div class="tab_item" for="datas.list">
        <text style="color: {{$item.color}};">{{$item.title}}</text>
    </div>
</tab-bar>

css如下圖所示：

.tab_bar {
    width: 100%;
    height: 60px;
}
.tab_item {
    width: 30%;
    height: 60px;
    flex-direction: column;
    align-items: center;
}

效果如下圖所示，藍色分割線不顯示：

​

 

【補充說明】

• ArkTS本身支持設置分割線是否顯示及支持設置分割線樣式，詳細描述與用法可見Divider描述：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
• 若不想通過tab-bar高度設置藍色分割線不顯示，可不使用Tabs組件，通過其他組件實現類似Tabs效果。

 

【Tabs相關文檔】

• HarmonyOS 3.0 Release 基於JS API參考：
  https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000001281480666
• HarmonyOS 3.0 Release 基於JS 開發指南：
  https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-component-tabs-0000001333800649
• HarmonyOS 3.0 Release ArkTS API參考：
  https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-container-tabs-0000001281001258
• HarmonyOS 3.1 Beta ArkTS API參考：
  https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-container-tabs-0000001478181433-V3
• OpenHarmony Tabs gitee介紹：
  https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md （其中包含Divider詳細介紹）

​