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

不念不忘少年蓝@ 2022-09-03 04:20 224阅读 0赞

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

![format_png][]

# 分解 #

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

1.  顶部一栏:周一到周日。
2.  左侧一栏:第1-12节课。
3.  中间部分灰色虚线和午休的红线。
4.  遍历具体课程，并绘制。

# 开始写代码 #

## 顶部： ##

使用wx的for循环

样式如下：

.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空出一部分空间。

## 左侧节次： ##

样式如下

.left {
      width: 35rpx;
      height: 100rpx;
      font-size: 9pt;
      justify-content: center;
      display: flex;
      align-items: center;
    }

设置好固高，这里大部分变量使用了rpx，这个是微信里比较好用的单位，可以省去不少自适应逻辑。

## 节次线条： ##

因为index从0开始，只需要判断index==3时，来标记线条红色和灰色即可。

## 课表： ##

这里就是用微信的list，然后通过绝对定位，算出margin-left和margin-top，以及根据节次算出height即可，至于背景颜色，遍历一个数组来获得不同颜色，并通过border-radius: 5px;来设置圆角。  
数组如下：

colorArrays: [ "#85B8CF", "#90C652", "#D8AA5A", "#FC9F9D", "#0A9A84", "#61BC69", "#12AEF3", "#E29AAD"]

list数组随便造了一点：

wlist: [
          { "xqj": 1, "skjc": 1, "skcd": 3, "kcmc": "高等数学@教A-301" },
          { "xqj": 1, "skjc": 5, "skcd": 3, "kcmc": "高等数学@教A-301" },
          { "xqj": 2, "skjc": 1, "skcd": 2,"kcmc":"高等数学@教A-301"},
          { "xqj": 2, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教A-301" },
          { "xqj": 3, "skjc": 4, "skcd": 1, "kcmc": "高等数学@教A-301" },
          { "xqj": 3, "skjc": 8, "skcd": 1, "kcmc": "高等数学@教A-301" },
          { "xqj": 3, "skjc": 5, "skcd": 2, "kcmc": "高等数学@教A-301" },
          { "xqj": 4, "skjc": 2, "skcd": 3, "kcmc": "高等数学@教A-301" },
          { "xqj": 4, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教A-301" },
          { "xqj": 5, "skjc": 1, "skcd": 2, "kcmc": "高等数学@教A-301" },
          { "xqj": 6, "skjc": 3, "skcd": 2, "kcmc": "高等数学@教A-301" },
          { "xqj": 7, "skjc": 5, "skcd": 3, "kcmc": "高等数学@教A-301" },     
        ]

xqj代表星期几上课，skjc代表第几节，skcd表示上课长度，如2代表连上2节，kcmc代表具体内容。  
每个课程具体样式如下：

.flex-item {
      width: 95rpx;
      height: 100px;
    }
    
    .kcb-item {
      position: absolute;
      justify-content: center;
      display: flex;
      align-items: center;
      border-radius: 5px;
    }
    
    .smalltext {
      font-size: 8pt;
      color: #fff;
      padding-left: 2px;
    }

都是一些普通的样式，如居中，固定宽高。  
最后外面包裹一层scroll，`<scroll-view scroll-y="true" class="scroll">`样式如下：

.scroll {
      height: 1170rpx;
      z-index: 101;
      position: fixed;
    }

# 最终效果 #

![format_png 1][]

###    源码下载地址：[https://download.csdn.net/download/meimeieee/20720449][https_download.csdn.net_download_meimeieee_20720449] ###

[format_png]: /images/20220829/0a64d4c7da9c4fc89b8f107b9855fea0.png
[format_png 1]: /images/20220829/3a00f2b870cf457cb8f7d7704f829a52.png
[https_download.csdn.net_download_meimeieee_20720449]: https://download.csdn.net/download/meimeieee/20720449