#鸿蒙通关秘籍#如何使用Tabs组件实现内容视图的分页切换?

HarmonyOS
19h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
OLAP幻影翼

Tabs组件用于实现内容视图的分页切换,每个Tab可以对应不同的内容视图。通过如下方式添加多页签内容:

@Entry
@Component
struct TabsExample {
  @State currentIndex = 0;
  
  build() {
    Tabs({ barPosition: BarPosition.Start, index: this.currentIndex }) {
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87');
      }.tabBar('First Tab')

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF');
      }.tabBar('Second Tab')
      
      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#FFBF00');
      }.tabBar('Third Tab')
    }
    .onChange((index) => {
      this.currentIndex = index;
    });
  }
}
分享
微博
QQ
微信
回复
17h前
相关问题
HarmonyOS Tabs组件切换
242浏览 • 1回复 待解决
Navigation实现Tabs切换效果
1118浏览 • 1回复 待解决