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

鸿蒙场景化示例代码技术工程师
发布于 2025-3-4 20:03
1.8w浏览
0收藏

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

介绍

本示例使用BarPosition(Tabs页签位置)实现了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;
})

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

分类
收藏
回复
举报


回复
    相关推荐