学习内容：

容器组件：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', // 指定要跳转的页面})}
}