动手撸一个微信小程序学生课程表源码

蚂蚁大喇叭

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

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

开始写代码

顶部：

---

使用wx的for循环

1. <view class="top">
   
2.   <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">周{{item}}</view>
   
3. </view>

复制代码

样式如下：

1. .top {
   
2.   display: flex;
   
3.   flex-direction: row;
   
4.   margin-left: 35rpx;
   
5.   background-color: #d2e6b3;
   
6.   color: #7cba23;
   
7. }
   
8. 
   
9. .top-text {
   
10.   width: 100rpx;
    
11.   height: 35rpx;
    
12.   font-size: 9pt;
    
13.   justify-content: center;
    
14.   display: flex;
    
15.   align-items: center;
    
16. }

复制代码

这里主要是background-color和字体颜色color以及左侧margin-left空出一部分空间。

左侧节次：

---

1. <view style="background-color:#D2E6B3;color:#7cba23;">
   
2.       <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}" class="left">
   
3.         {{item}}
   
4.       </view>
   
5. </view>

复制代码

样式如下

1. .left {
   
2.   width: 35rpx;
   
3.   height: 100rpx;
   
4.   font-size: 9pt;
   
5.   justify-content: center;
   
6.   display: flex;
   
7.   align-items: center;
   
8. }

复制代码

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

节次线条：

---

1.     <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}">
   
2.       <view style="width:750rpx;margin-top:{{(index+1)*100}}rpx;  position: absolute;border-bottom:1rpx solid {{index==3?'red':'lightgray'}};">
   
3.       </view>
   
4.     </view>

复制代码

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

课表：

---

1.     <view wx:for="{{wlist}}">
   
2.       <view class="flex-item kcb-item" bindtap="showCardView" data-statu="open" data-index="{{index}}" style="margin-left:{{(item.xqj-1)*100}}rpx;margin-top:{{(item.skjc-1)*100+5}}rpx;height:{{item.skcd*100-5}}rpx;background-color:{{colorArrays[index%9]}}">
   
3.         <view class="smalltext">{{item.kcmc}}</view>
   
4.       </view>
   
5.     </view>

复制代码

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

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

复制代码

list数组随便造了一点：

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

复制代码

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

1. .flex-item {
   
2.   width: 95rpx;
   
3.   height: 100px;
   
4. }
   
5. 
   
6. .kcb-item {
   
7.   position: absolute;
   
8.   justify-content: center;
   
9.   display: flex;
   
10.   align-items: center;
    
11.   border-radius: 5px;
    
12. }
    
13. 
    
14. .smalltext {
    
15.   font-size: 8pt;
    
16.   color: #fff;
    
17.   padding-left: 2px;
    
18. }

复制代码

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

1. .scroll {
   
2.   height: 1170rpx;
   
3.   z-index: 101;
   
4.   position: fixed;
   
5. }

复制代码

最终效果

---

源码下载

游客，如果您要下载源码或者查看隐藏内容请回复

That_Childish

谢谢大佬的分享。。。。。