OpenHarmony之自定义Tabs--------涂刀乐 原创

​

Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

子组件

不支持自定义组件作为子组件， 仅可包含子组件TabContent， 以及渲染控制类型if/else和ForEach, 并且if/else和ForEach下也仅支持TabContent, 不支持自定义组件。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

参数：

参数名 类型 必填 说明
barPosition BarPosition 否 设置Tabs的页签位置。
默认值：BarPosition.Start
index number 否 设置当前显示页签的索引。
默认值：0
说明：
设置为小于0的值时按默认值显示。
可选值为[0, TabContent子节点数量-1]。
直接修改index跳页时，切换动效不生效。 使用TabController的changeIndex时，默认生效切换动效，可以设置animationDuration为0关闭动画。
从API version 10开始，该参数支持$$双向绑定变量。
controller TabsController 否 设置Tabs控制器。

详细属性参阅官方文档

Tabs

自定义tabBar代码实现

@Builder tabBuilder(index: number, name: string ,selectIcon:Resource,unselectIcon:Resource,border_radius_left:number,border_radius_right:number) {
    Column() {
      Column() {
        Image(this.currentIndex === index ? selectIcon: unselectIcon)
          .width(28)
          .height(26)
        Text(name)
          .fontSize(16)
          .fontColor(this.currentIndex ===  index ? "#BEFF33" : "#9C9C9C")
      }.width('100%').height('100%').margin({top:5})

    }.width('100%').height('100%')
    .backgroundColor('#000000')
    .borderRadius({topLeft:border_radius_left,topRight:border_radius_right,bottomLeft:border_radius_left,bottomRight:border_radius_right})
    .margin({left:border_radius_left,right:border_radius_right})
  }

效果展示

（页面懒加载和释放）

具体代码实现

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct TabsSwiperExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private list: number[] = []
  private tabsController: TabsController = new TabsController()
  private swiperController: SwiperController = new SwiperController()
  private swiperData: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    for (let i = 0; i <= 9; i++) {
      this.list.push(i);
    }
    this.swiperData = new MyDataSource(this.list)
  }

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('20%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
        ForEach(this.list, (index: number) =>{
          TabContent().tabBar(this.tabBuilder(index, '页签 ' + this.list[index]))
        })
      }
      .onTabBarClick((index: number) => {
        this.currentIndex = index
        this.swiperController.changeIndex(index, true)
      })
      .barMode(BarMode.Scrollable)
      .backgroundColor('#F1F3F5')
      .height(56)
      .width('100%')

      Swiper(this.swiperController) {
        LazyForEach(this.swiperData, (item: string) => {
          Text(item.toString())
            .onAppear(()=>{
              console.info('onAppear ' + item.toString())
            })
            .onDisAppear(()=>{
              console.info('onDisAppear ' + item.toString())
            })
            .width('100%')
            .height('100%')
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .loop(false)
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        this.currentIndex = targetIndex
        this.tabsController.changeIndex(targetIndex)
      })
    }
  }
}

效果展示