一、Tabbar組件概述
本組件通過HML布局、CSS樣式和JS邏輯封裝實(shí)現(xiàn)一個(gè)通用的Tabbar。支持可配置的Tab項(xiàng)和對應(yīng)頁面,可以方便接入到不同頁面中,提高開發(fā)效率。
二、實(shí)現(xiàn)方式
- HML部分采用Flex布局實(shí)現(xiàn)Tabbar的整體結(jié)構(gòu),包含多個(gè)Tab項(xiàng)。
- CSS部分定義樣式,包括圖標(biāo)大小、文字顏色等樣式參數(shù)。支持后續(xù)擴(kuò)展。
- JS部分提供組件的核心邏輯。
- 定義Tab項(xiàng)數(shù)據(jù),支持配置頁面路由、圖標(biāo)、標(biāo)簽等信息。
- 利用系統(tǒng)API dynamical添加點(diǎn)擊事件,進(jìn)行路由跳轉(zhuǎn)等功能。
三、使用方法
- 頁面HML布局部分直接引入Tabbar組件節(jié)點(diǎn)。
- JS邏輯初始化時(shí)配置所需的Tab項(xiàng)數(shù)據(jù)。包括頁面、圖標(biāo)、標(biāo)簽等。
- 傳入配置數(shù)據(jù),綁定點(diǎn)擊事件,實(shí)現(xiàn)路由跳轉(zhuǎn)等功能。
四、代碼示例
// tabbar組件
@Component
struct TabBar {
build() {
Row() {
Column() {
Image($r('app'))
.onClick(() => {
// 點(diǎn)擊圖片事件處理
})
Text('首頁')
.onClick(() => {
// 點(diǎn)擊文字事件處理
})
}
Column() {
// 其他Tab Item
}
}
}
}
// 登錄頁面使用
@Component
struct LoginPage {
build() {
Column() {
// 登錄頁面內(nèi)容
TabBar()
}
}
}
上面是Tabbar的組件代碼,通過Row和Column布局,內(nèi)部可以放置圖片、文字等元素。并且可為每個(gè)item添加點(diǎn)擊事件。
在登錄頁面底部,直接實(shí)例化并使用該TabBar組件。
這實(shí)現(xiàn)了Tabbar的復(fù)用,以及和頁面的解耦。
接下來,我們可以通過參數(shù)形式,使Tabbar可配置:
// 定義Tab項(xiàng)配置
const tabs = [{
icon: 'app',
text: '首頁'
}, {
//...其他
}]
// Tabbar組件
struct TabBar {
build() {
Row() {
tabs.forEach(item => {
Column() {
Image($r(item.icon))
Text(item.text)
}.onClick(() => {
//...
})
}
}
}
}
// 使用時(shí)配置
TabBar({
tabs
})
上面我們通過傳入tabs參數(shù),使Tabbar可以動態(tài)配置,而不需要每次修改組件代碼。
完整的使用示例：
hml：
<!-- 1. HML布局 -->
<div class="container">
<!-- 頁面內(nèi)容 -->
<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'
},
//...
];
// 獲取節(jié)點(diǎn)
const tabItems = document.getElementsByClassName('tab-item');
// 綁定點(diǎn)擊事件
tabItems.forEach((item, index) => {
item.onclick = () => {
// 拿到配置
let config = tabs[index];
// 跳轉(zhuǎn)頁面
router.replace({uri: config.page});
};
});
在HML中通過div布局Tabbar結(jié)構(gòu),JS中動態(tài)綁定每個(gè)tab的點(diǎn)擊事件,配合CSS定義樣式。
這個(gè)示例中,Tab實(shí)現(xiàn)了圖標(biāo)、標(biāo)題和關(guān)聯(lián)頁面的配置,可滿足通用的Tab組件需求。
五、擴(kuò)展方向
當(dāng)前組件提供了Tabbar的基礎(chǔ)功能,后續(xù)可以繼續(xù)優(yōu)化:文章來源：http://www.zghlxwxcb.cn/news/detail-766932.html
- 支持更豐富的樣式定制需求。
- 增加Badge、紅點(diǎn)等擴(kuò)展視圖。
- 動態(tài)獲取Tab項(xiàng)數(shù)據(jù),而不是編碼形式。
- 加入應(yīng)用間通信、數(shù)據(jù)共享等能力。
六、結(jié)語
上一節(jié)：詳細(xì)教程 - 從零開發(fā) Vue 鴻蒙應(yīng)用 第二節(jié) （鴻蒙Stage模型 登錄頁面）文章來源地址http://www.zghlxwxcb.cn/news/detail-766932.html
到了這里，關(guān)于詳細(xì)教程 - 從零開發(fā) Vue 鴻蒙harmonyOS應(yīng)用 第三節(jié) （封裝TabBar JS版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
