258资源分享网

分解仔细看完课程表页面，我们可以把页面分解：顶部一栏:周一到周日。左侧一栏:第1-12节课。中间部分灰色虚线和午休的红线。遍历具体课程，并绘制。开始写代码顶部：使用wx的for循环view class="top" view wx:for="{ ...

 

 

 

分解

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

顶部一栏:周一到周日。

左侧一栏:第1-12节课。

中间部分灰色虚线和午休的红线。

遍历具体课程，并绘制。

开始写代码 顶部：

使用wx的for循环

<view class="top"> <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">周{{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空出一部分空间。

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

样式如下

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

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

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

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

课表： <view wx:for="{{wlist}}"> <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]}}"> <view class="smalltext">{{item.kcmc}}view> view> view>

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

数组如下：

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