Maker-鸿蒙应用开发培训笔记02

1.自定义组件的创建和使用

定义专门存放自定义组件的文件夹 components.xxx，并设置3个基础文件 xxx.hml、xxx.js、xxx.css.

设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」

<div class="container">
    <toolbar class="tabbar">
        <toolbar-item for="{
  {tabbarItems}}" icon='{
  {$item.img}}' value='{
  {$item.name}}' onclick="jump($idx)" ></toolbar-item>
    </toolbar>
</div>

导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中。

设置 CSS 样式 

自定义组件通过element引入到宿主页面，使用方法：

<element name='comp' src='../..