鸿蒙移动端常用UI——tab切换栏

效果图

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() {
        //布局区别：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,'待发货'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(this.TabBuilder(2,'已发货'))

          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,'确认'))

        }
        .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是为了方便开发和维护，对鸿蒙UI做了一层简单的封装，并且会陆续进行更新.
2、基于API Version9版本.
3、看到文章觉得还OK麻烦留个赞👍谢谢啦～