分解
仔细看完课程表页面,我们可以把页面分解:
顶部一栏:周一到周日。
左侧一栏:第1-12节课。
中间部分灰色虚线和午休的红线。
遍历具体课程,并绘制。
开始写代码
顶部:
使用wx的for循环
周{ {item}}view>
view>
样式如下:
.top {
display: flex;
flex-direction: row;
margin-left: 35rpx;
background-color: #d2e6b3;
color: #7cba23;
}
.top-text {
width: 100rpx;
height: 35rpx;
font-size: 9pt;
justify-content: center;
display: flex;
align-items: center;
}
这里主要是background-color和字体颜色color以及左侧margin-left空出一部分空间。
左侧节次:
{ {item}}
view>
view>
样式如下
.left {
width: 35rpx;
height: 100rpx;
font-size: 9pt;