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