效果圖

image.png

tab切換欄全部代碼

import { BSText } from '../../../components/BSUI'
import { AppBarWidget } from './AppBarWidget'


@Entry
@Component
struct TabPage {
  @State currentIndex: number = 0

  @Builder TabBuilder(index: number, title: string,) {
    Column() {
      Divider().height(5).color(Color.Transparent).width(20)
      BSText({title:title.toString(),fontColor:this.currentIndex === index ?  '#F33F3F':'#333333',fontSize:15})
      Divider().color(this.currentIndex === index ?  Color.Red:Color.Transparent).width(30)
    }.justifyContent(FlexAlign.SpaceBetween).layoutWeight(1).width(80)
  }

  build() {
    Column(){
      AppBarWidget({title:'TabPage'})
      Column() {
        //布局區(qū)別：BarPosition.Start、vertical(false)
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(this.TabBuilder(0,'全部'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(this.TabBuilder(1,'待發(fā)貨'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(this.TabBuilder(2,'已發(fā)貨'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(this.TabBuilder(3,'已收貨'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(this.TabBuilder(3,'確認(rèn)'))

        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Scrollable)
        .onChange((index: number) => {
          this.currentIndex = index;
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').layoutWeight(1)
    }
  }
}

ps:
1、BS開頭的API是為了方便開發(fā)和維護(hù)，對(duì)鴻蒙UI做了一層簡(jiǎn)單的封裝，并且會(huì)陸續(xù)進(jìn)行更新.
2、基于API Version9版本.
3、看到文章覺得還OK麻煩留個(gè)贊??謝謝啦～