详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第三节 （封装TabBar JS版）_鸿蒙$r('app.)如何封装的

一、Tabbar组件概述

本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。

二、实现方式

1. HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。
2. CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。
3. JS部分提供组件的核心逻辑。

• 定义Tab项数据,支持配置页面路由、图标、标签等信息。
• 利用系统API dynamical添加点击事件,进行路由跳转等功能。

三、使用方法

1. 页面HML布局部分直接引入Tabbar组件节点。
2. JS逻辑初始化时配置所需的Tab项数据。包括页面、图标、标签等。
3. 传入配置数据,绑定点击事件,实现路由跳转等功能。

四、代码示例

// tabbar组件
@Component
struct TabBar {

  build() {
    Row() {
      Column() { 
        Image($r('app'))
          .onClick(() => {
            // 点击图片事件处理
          })
        Text('首页') 
          .onClick(() => {
             // 点击文字事件处理
          })
      }
      Column() {
        // 其他Tab Item
      }
    }
  } 
}

// 登录页面使用
@Component
struct LoginPage {

  build() {
    Column() {
      // 登录页面内容  
      
      TabBar() 
    }
  }

}
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
28
29
30
31
32
33
34
35
36

上面是Tabbar的组件代码,通过Row和Column布局,内部可以放置图片、文字等元素。并且可为每个item添加点击事件。

在登录页面底部,直接实例化并使用该TabBar组件。

这实现了Tabbar的复用,以及和页面的解耦。

接下来,我们可以通过参数形式,使Tabbar可配置:

// 定义Tab项配置
const tabs = [{
  icon: 'app',
  text: '首页'
}, {
  //...其他
}]

// Tabbar组件
struct TabBar {

  build() {
    Row() {
      tabs.forEach(item => {
        Column() {
          Image($r(item.icon))
          Text(item.text)
        }.onClick(() => {
          //...
        })  
      }
    }
  }

}

// 使用时配置
TabBar({
  tabs
})
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
28
29
30

上面我们通过传入tabs参数,使Tabbar可以动态配置,而不需要每次修改组件代码。

完整的使用示例：

hml：

<!-- 1. HML布局 -->
<div class="container">

  <!-- 页面内容 -->
  <div class="content"></div>

  <!-- Tabbar -->
  <div class="tab-bar">
    <div class="tab-item">      
      <image class="icon"></image>
      <text class="label"></text>
    </div>
    <div class="tab-item"></div>
    ...
  </div>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

css：

/* 2. CSS样式 */  
.container {
  display: flex;
  flex-direction: column;  
  justify-content: space-between; 
}

.content {
  flex: 1;  
}

.tab-bar {
  flex-direction: row;
}

.tab-item {
  flex-direction: column;
  align-items: center;  
}

.icon {
  width: 30px;
  height: 30px;
}

.label {
  font-size: 12px;
}
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
28

js：

// 3. js逻辑
import router from '@system.router';

// Tab配置
const tabs = [
  {
    icon: 'home',
    text: '首页',
    page: 'pages/home'
  },  
  //...
];

// 获取节点
const tabItems = document.getElementsByClassName('tab-item');

// 绑定点击事件  
tabItems.forEach((item, index) => {

  item.onclick = () => {
    
    // 拿到配置
    let config = tabs[index];
    
    // 跳转页面 
    router.replace({uri: config.page});

  };

});
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
28
29
30

在HML中通过div布局Tabbar结构,JS中动态绑定每个tab的点击事件,配合CSS定义样式。

这个示例中,Tab实现了图标、标题和关联页面的配置,可满足通用的Tab组件需求。

五、扩展方向

当前组件提供了Tabbar的基础功能,后续可以继续优化:

• 支持更丰富的样式定制需求。
• 增加Badge、红点等扩展视图。
• 动态获取Tab项数据,而不是编码形式。
• 加入应用间通信、数据共享等能力。

六、结语

上一节：详细教程 - 从零开发 Vue 鸿蒙应用 第二节 （鸿蒙Stage模型 登录页面）