#鸿蒙通关秘籍#如何使用Tabs组件控制器进行页签切换？

@Entry
@Component
struct TabsControllerExample {
  private controller = new TabsController();

  build() {
    Column() {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87');
        }.tabBar('Tab 1')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF');
        }.tabBar('Tab 2')
      }
      
      Button('Switch to Tab 1').onClick(() => {
        this.controller.changeIndex(0);
      })

      Button('Switch to Tab 2').onClick(() => {
        this.controller.changeIndex(1);
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.