查看: 848|回复: 1

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

[复制链接]
发表于 2019-8-27 21:46:29 | 显示全部楼层 |阅读模式
cc.jpg

分解
仔细看完课程表页面,我们可以把页面分解:
  • 顶部一栏:周一到周日。
  • 左侧一栏:第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. .top-text {
  9.   width: 100rpx;
  10.   height: 35rpx;
  11.   font-size: 9pt;
  12.   justify-content: center;
  13.   display: flex;
  14.   align-items: center;
  15. }
复制代码
这里主要是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. .kcb-item {
  6.   position: absolute;
  7.   justify-content: center;
  8.   display: flex;
  9.   align-items: center;
  10.   border-radius: 5px;
  11. }

  12. .smalltext {
  13.   font-size: 8pt;
  14.   color: #fff;
  15.   padding-left: 2px;
  16. }
复制代码
都是一些普通的样式,如居中,固定宽高。
最后外面包裹一层scroll,<scroll-view scroll-y="true" class="scroll">样式如下:
  1. .scroll {
  2.   height: 1170rpx;
  3.   z-index: 101;
  4.   position: fixed;
  5. }
复制代码
最终效果

3c.jpg

源码下载

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







回复

使用道具 举报

发表于 2019-9-5 19:00:37 | 显示全部楼层
谢谢大佬的分享。。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表