实现Tabs左对齐鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例使用BarPosition（Tabs页签位置）实现了Tabs左对齐的功能。

实现Tabs左对齐源码链接

效果预览

使用说明

用户点击左上角页签切换页面

实现思路

使用BarPosition（Tabs页签位置）实现左对齐，核心代码如下：

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent() {
    Text('页签1页面')
  }

  TabContent() {
    Text('页签2页面')
  }

  TabContent() {
    Text('页签3页面')
  }
}.onChange((index: number) => {
  this.currentIndex = index;
})