微信小程序制作课程表_动手撸一个微信小程序学生课程表页面

分解

仔细看完课程表页面，我们可以把页面分解：

顶部一栏:周一到周日。

左侧一栏:第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;