一、Tabbar组件概述
本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。
二、实现方式
- HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。
- CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。
- JS部分提供组件的核心逻辑。
- 定义Tab项数据,支持配置页面路由、图标、标签等信息。
- 利用系统API dynamical添加点击事件,进行路由跳转等功能。
三、使用方法
- 页面HML布局部分直接引入Tabbar组件节点。
- JS逻辑初始化时配置所需的Tab项数据。包括页面、图标、标签等。
- 传入配置数据,绑定点击事件,实现路由跳转等功能。
四、代码示例
// tabbar组件
@Component
struct TabBar {
build() {
Row() {
Column() {
Image($r('app'))
.onClick(() => {
// 点击图片事件处理
})
Text('首页')
.onClick(() => {
// 点击文字事件处理
})
}
Column() {
// 其他Tab Item
}
}
}
}
// 登录页面使用
@Component
struct LoginPage {
build() {
Column() {
// 登录页面内容
TabBar()
}
}
}
上面是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
})
上面我们通过传入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>
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;
}
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});
};
});
在HML中通过div布局Tabbar结构,JS中动态绑定每个tab的点击事件,配合CSS定义样式。
这个示例中,Tab实现了图标、标题和关联页面的配置,可满足通用的Tab组件需求。
五、扩展方向
当前组件提供了Tabbar的基础功能,后续可以继续优化:
- 支持更丰富的样式定制需求。
- 增加Badge、红点等扩展视图。
- 动态获取Tab项数据,而不是编码形式。
- 加入应用间通信、数据共享等能力。
六、结语
上一节：详细教程 - 从零开发 Vue 鸿蒙应用 第二节 （鸿蒙Stage模型 登录页面）
