《鴻蒙JS應(yīng)用開發(fā)》項(xiàng)目4類Web開發(fā)范式組件4.3.6任務(wù)掌握工具欄組件的使用1、學(xué)習(xí)如何在HarmonyOS應(yīng)用開發(fā)中有效地使用toolbar和toolbar-item組件2、將通過實(shí)踐學(xué)習(xí)這些組件的基礎(chǔ)知識(shí)和應(yīng)用，特別是在創(chuàng)建電商導(dǎo)航工具欄方面。任務(wù)陳述學(xué)習(xí)目標(biāo)掌握如何在電商應(yīng)用中實(shí)現(xiàn)一個(gè)基于toolbar的導(dǎo)航欄。將通過實(shí)踐學(xué)習(xí)這些組件的基礎(chǔ)知識(shí)和應(yīng)用，特別是在創(chuàng)建電商導(dǎo)航工具欄方面。掌握如何創(chuàng)建和配置這些組件。學(xué)習(xí)組件的相關(guān)屬性和事件?；A(chǔ)的HTML、CSS和JavaScript知識(shí)。HarmonyOS的基礎(chǔ)架構(gòu)和組件系統(tǒng)。對(duì)HarmonyOS的數(shù)據(jù)綁定和事件處理有一定了解。知識(shí)準(zhǔn)備任務(wù)實(shí)施01掌握目標(biāo)本任務(wù)主要目的是幫助學(xué)生掌握在HarmonyOS應(yīng)用開發(fā)中工具欄組件的基本使用方法，toolbar為頁(yè)面工具欄組件，用于展示針對(duì)當(dāng)前界面的操作選項(xiàng)，可作為頁(yè)面的一級(jí)導(dǎo)航。學(xué)生需要學(xué)習(xí)掌握如何創(chuàng)建toolbar組件，toolbar-item組件，以及組件的相關(guān)屬性和事件，最后開發(fā)實(shí)現(xiàn)一個(gè)電商的導(dǎo)航工具欄。hml代碼實(shí)現(xiàn)02hml代碼首先在pages/index目錄下的hml文件中創(chuàng)建一個(gè)toolbar組件，hml代碼如下所示：<divclass="container">

<toolbarstyle="position:fixed;bottom:0%;

width:100%;background-color:#F1F3F5;">

<toolbar-itemvalue="item1"></toolbar-item>

<toolbar-itemvalue="item2"></toolbar-item>

<toolbar-itemvalue="item3"></toolbar-item>

<toolbar-itemvalue="item4"></toolbar-item>

<toolbar-itemvalue="item5"></toolbar-item>

<toolbar-itemvalue="item6"></toolbar-item>

</toolbar>

</div>css代碼實(shí)現(xiàn)03css

樣式css代碼如下所示：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}預(yù)覽結(jié)果04預(yù)覽結(jié)果預(yù)覽器查看效果如下圖所示：工具欄（toolbar）組件專門用于容納toolbar-item

子組件，而且在一個(gè)頁(yè)面上最多只能顯示5個(gè)這樣的子組件。如果你添加了超過5個(gè)的`toolbar-item`，系統(tǒng)將僅顯示前4個(gè)，而第5個(gè)及之后的toolbar-item會(huì)被歸入一個(gè)名為"更多項(xiàng)"的特殊菜單中。用戶可以通過點(diǎn)擊這個(gè)"更多項(xiàng)"菜單來查看并訪問那些超出數(shù)量限制的`toolbar-item`。需要注意的是，被歸入"更多項(xiàng)"菜單的`toolbar-item`將使用系統(tǒng)默認(rèn)的樣式，而不會(huì)應(yīng)用任何自定義樣式設(shè)置。開發(fā)電商導(dǎo)航欄05hml代碼接下來我們使用工具欄組件開發(fā)一個(gè)實(shí)際電商項(xiàng)目中的導(dǎo)航欄，并且可以點(diǎn)擊每一個(gè)選項(xiàng)卡切換不同的toolbar-item，實(shí)現(xiàn)頁(yè)簽切換的效果。hml代碼如下所示：css

代碼css代碼如右圖：.container{

width:100%;

height:100%;

flex-direction:column;

justify-content:center;

align-items:center;

background-color:#F1F3F5;

}

toolbar-item{

font-size:35px;

}js代碼Js代碼如右圖：跳轉(zhuǎn)的實(shí)現(xiàn)原理上述代碼示例展示了如何使用toolbar和toolbar-item組件來構(gòu)建一個(gè)固定在頁(yè)面底部的工具欄，以及如何使用這個(gè)工具欄來切換不同的圖片。當(dāng)用戶點(diǎn)擊一個(gè)toolbar-item時(shí)，@click="switchToolbar({{$idx}})"會(huì)被觸發(fā)，這將調(diào)用switchToolbar函數(shù)并傳入當(dāng)前點(diǎn)擊的toolbar-item的索引。在switchToolbar函數(shù)中，active狀態(tài)會(huì)被更新為當(dāng)前點(diǎn)擊的toolbar-item的索引，根據(jù)active狀態(tài)的變化，相應(yīng)的圖片會(huì)在image組件中顯示。狀態(tài)改變的實(shí)現(xiàn)原理活動(dòng)的（被點(diǎn)擊的）toolbar-item會(huì)顯示為紅色字體和特殊的背景色，這是通過style="color:{{active==$idx?'red':'black'}};background-color:{{active==$idx?'#dbe7f1':'#F1F3F5'}};"來實(shí)現(xiàn)的。狀態(tài)改變的實(shí)現(xiàn)原理Tips：如需實(shí)現(xiàn)選項(xiàng)卡圖標(biāo)狀態(tài)的改變可以模仿背景色