分解

仔(zi)細看完(wan)課程表頁面，我們可以(yi)把頁面分解(jie)：

1. 頂部一欄:周一到周日。
2. 左側一欄:第1-12節課。
3. 中間部分灰色虛線和午休的紅線。
4. 遍歷具體課程，并繪制。

開始寫代碼

頂部：

使用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和字體顏(yan)色color以及左側(ce)margin-left空出一(yi)部分空間。

左側節次：

<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;
}

設置好固高，這里大部分變(bian)量使(shi)用了rpx，這個是微信里比較好用的單(dan)位，可以省去不少(shao)自(zi)適應(ying)邏輯。

節次線條：

<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開(kai)始，只需要判斷index==3時，來標記線條紅色(se)和灰色(se)即可。

課表：

<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>

這里(li)就是(shi)用(yong)微信的list，然(ran)后通過(guo)絕(jue)對定位，算出margin-left和(he)margin-top，以及根據節次算出height即可，至于背景顏(yan)(yan)色(se)，遍歷一個數組來獲得不同(tong)顏(yan)(yan)色(se)，并通過(guo)border-radius: 5px;來設置圓角。

數組如(ru)下：

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

list數組隨便(bian)造了一點：

wlist: [
      { "xqj": 1, "skjc": 1, "skcd": 3, "kcmc": "高等數學@教(jiao)A-301" },
      { "xqj": 1, "skjc": 5, "skcd": 3, "kcmc": "高(gao)等數學@教(jiao)A-301" },
      { "xqj": 2, "skjc": 1, "skcd": 2,"kcmc":"高等(deng)數學@教A-301"},
      { "xqj": 2, "skjc": 8, "skcd": 2, "kcmc": "高等數學@教A-301" },
      { "xqj": 3, "skjc": 4, "skcd": 1, "kcmc": "高等(deng)數學(xue)@教A-301" },
      { "xqj": 3, "skjc": 8, "skcd": 1, "kcmc": "高等數(shu)學(xue)@教A-301" },
      { "xqj": 3, "skjc": 5, "skcd": 2, "kcmc": "高等數(shu)學(xue)@教(jiao)A-301" },
      { "xqj": 4, "skjc": 2, "skcd": 3, "kcmc": "高等(deng)數學@教A-301" },
      { "xqj": 4, "skjc": 8, "skcd": 2, "kcmc": "高等數(shu)學@教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代表星期(qi)幾上(shang)課，skjc代表第幾節(jie)，skcd表示(shi)上(shang)課長度，如2代表連上(shang)2節(jie)，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;
}

都(dou)是一(yi)些(xie)普通(tong)的(de)樣式，如居中(zhong)，固定寬高(gao)。

最后外面包裹一層scroll，  樣式如下：

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

最終效果