鸿蒙学习3

学习内容：

容器组件：List、Tab

基础组件：Chart、Picker、Slider、Switch、Toolbar、Search

作业：

学习笔记：

        List：仅支持<list-item-group>和<list-item>。 

这个可以很清楚的看到他们的关系，list下面放所有的分组，list-item-group里面放一组内容，第一个是标题，剩下的是里面的内容。

         Tab：仅支持最多一个<tab-bar>和最多一个<tab-content>。

上图就是官方给的案列，可以看出tab标签下面分为两个部分，一个是tab-bar放的是标题 一个是tab-content放的是内容。

        Chart：一个图表工具，具体的去看官方文档，这里就是说一个大概。

<!-- xxx.hml -->
<div class="container">
  <stack class="chart-region">
    <image class="chart-background" src="common/background.png"></image>
    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
  </stack>
  <button value="Add data" onclick="addData"></button>
</div>

image里面放的是背景图，然后chart里type是图标的类型，

        picker：滑动选择器

         slider：一个滑条调节

switch：开关选择器

toolbar:放在底部的工具栏

可以看到，可以加图标和文字说明，多出来的就被收集 

search:一个搜索框

做作业：我在底部toolbar里面加了一个跳转，为实现不同页面的跳转。

代码：

<!-- xxx.hml -->
<div class="background" style="color: darkgray;">
    <div class="container">
        <search hint="请输入搜索内容" searchbutton="搜索" @search="search">
        </search>
    </div>
    <tabs class = "tabs" index="0" vertical="false" onchange="change">
        <tab-bar class="tab-bar" mode="fixed">
            <text class="tab-text">今日</text>
            <text class="tab-text">历史</text>
        </tab-bar>
        <tab-content class="tabcontent" scrollable="true">
            <div class="item-content" >
                    <text class="title">时间段</text>
                    <list class="listG">
                        <list-item-group>
                            <list-item><text class="group">早上</text></list-item>
                            <list-item><text class="groupValue">7:00-8:00</text></list-item>
                            <list-item><text class="groupValue">8:00-9:00</text></list-item>
                            <list-item><text class="groupValue">9:00-10:00</text></list-item>
                        </list-item-group>
                        <list-item-group>
                            <list-item><text class="group">中午</text></list-item>
                            <list-item><text class="groupValue">10:00-11:00</text></list-item>
                            <list-item><text class="groupValue">11:00-12:00</text></list-item>
                            <list-item><text class="groupValue">12:00-13:00</text></list-item>
                        </list-item-group>
                        <list-item-group>
                            <list-item><text class="group">下午</text></list-item>
                            <list-item><text class="groupValue">14:00-15:00</text></list-item>
                            <list-item><text class="groupValue">15:00-16:00</text></list-item>
                            <list-item><text class="groupValue">16:00-17:00</text></list-item>
                        </list-item-group>
                    </list>
            </div>
            <div class="item-content" >
                <text class="item-title">Second screen</text>
            </div>
        </tab-content>
    </tabs>
    <toolbar class="dibu" style="position:fixed; bottom: 0px;">
        <toolbar-item icon='common/Icon/home-h.png' value='首页' onclick="launch1" >   </toolbar-item>
        <toolbar-item icon='common/Icon/list-h.png' value='讨论' onclick="launch2">   </toolbar-item>
        <toolbar-item icon='common/Icon/user-h.png' value='个人' onclick="launch3" >   </toolbar-item>
    </toolbar>

</div>

/* xxx.css */
.background{
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.container{
    height: 50px;
}
.dibu{
    color: black;
    font-size: 15px;
}
.tab-text{
    color: black;
}
.container {
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
}
.item-content{
    flex-direction: column;
    color: black;
}
.title{
    height: 50px;
    font-size: 16px;
    color: grey;
    margin-top: 40px;
    margin-left: 30px;
}
.text{
    font-size: 20px;
    font-weight:500;
    margin-left: 12px;
}
.list{
    width: 96%;
    margin-left: 5%;
    height: 250px;
    columns: 1;
}
.listG{
    height: 400px;
}
.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}
.group{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    border-bottom: 1px solid #DEDEDE;
    font-size: 20px;
    font-weight:500;
}
.groupValue{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

// xxx.js
import router from '@system.router';

export default {
    launch2() {
        router.push ({
            uri:'pages/index1/index', // 指定要跳转的页面
        })
    }
}