school-miniprogram/src/pages/schedule/index.wxml

<navbar fixed customStyle="background:{{background}};">
  <van-icon class="page-back" name="arrow-left" slot="left" />
  <view class="page-title" slot="title">SIC+ 课表</view>
</navbar>
<view class="page" style="padding-top: {{pageTop}}px;">
  <view class="page-header">
    <view class="week-wrap">
      <view class="week">
        <image class="icon" src="/images/icon69.png"></image>
        <view class="content">第14周</view>
        <image class="icon" src="/images/icon70.png"></image>
      </view>
      <view class="school-year">2025-2026 第1学期</view>
    </view>
    <view class="notify">
      <view class="icon-wrap">
        <image class="icon" src="/images/icon71.png"></image>
      </view>
      提醒我
    </view>
    <view class="switch-format">
      <view class="icon-wrap active">
        <image class="icon" src="/images/icon74.png"></image>
        <image class="icon" src="/images/icon72.png"></image>
      </view>
      <view class="icon-wrap">
        <image class="icon" src="/images/icon73.png"></image>
        <image class="icon" src="/images/icon75.png"></image>
      </view>
    </view>
  </view>
  <view class="calender">
    <view class="item {{index==2 && 'active'}}" wx:for="{{7}}" wx:key="index">
      <view class="week-name">一</view>
      <view class="day">6/1</view>
    </view>
  </view>

  <view class="format1" wx:if="{{false}}">
    <view class="card" wx:for="{{20}}" wx:key="index">
      <view class="aside">
        <view class="start">08:00</view>
        <view class="line"></view>
        <view class="end">09:35</view>
      </view>
      <view class="container">
        <view class="c-header">
          <view class="title">微积分 (Calculus)</view>
          <view class="step">第1-2节</view>
        </view>
        <view class="site">
          <svg-icon class="icon" width="18rpx" height="18rpx" src="/images/svg1.svg"></svg-icon>
          <view class="content">博学楼4教室</view>
        </view>
        <view class="teacher">
          <svg-icon class="icon" width="18rpx" height="18rpx" src="/images/svg2.svg"></svg-icon>
          <view class="content">李老师</view>
        </view>
      </view>
    </view>
  </view>

  <view class="format2" wx:else>
    <!-- 顶部日期表头 -->
    <view class="schedule-header">
      <view class="header-time">时间</view>
      <view class="header-days">
        <view wx:for="{{weekList}}" wx:key="date" class="day-header {{index === todayIndex ? 'active' : ''}}">
          <view class="day-week">{{item.week}}</view>
          <view class="day-date">{{item.date}}</view>
        </view>
      </view>
    </view>

    <!-- 课程主体区域 -->
    <scroll-view scroll-x class="schedule-body">
      <view class="body-row">
        <!-- 左侧节次列 -->
        <view class="body-time">
          <view wx:for="{{sectionList}}" wx:key="index" class="time-slot">
            <view class="slot-name">第{{item.index}}节</view>
            <view class="slot-range">{{item.time}}</view>
          </view>
        </view>
        <!-- 右侧课程网格 -->
        <view class="body-grid">
          <view wx:for="{{weekList}}" wx:key="date" class="day-column">
            <view
              wx:for="{{item.courseList}}"
              wx:key="id"
              class="course-block"
              style="background-color: {{item.bgColor}}; border-color: {{item.borderColor}}; top: {{(item.start - 1) * 140}}rpx; height: {{item.rowNum * 140 - 2}}rpx;"
            >
              <view class="course-title" style="color: {{item.textColor}}">{{item.name}}</view>
              <view class="course-loc" style="color: {{item.locColor}}">{{item.loc}}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view class="format3">
    <view class="schedule-wrap">
      <!-- 顶部表头：绑定滚动事件 -->
      <scroll-view scroll-x class="header-scroll" bindscroll="onHeaderScroll" scroll-left="{{scrollX}}">
        <view class="header-row">
          <view class="time-col header-time">时间</view>
          <view wx:for="{{weekList}}" wx:key="date" class="day-col header-day">
            <view class="week">{{item.week}}</view>
            <view class="date">{{item.date}}</view>
          </view>
        </view>
      </scroll-view>

      <!-- 主体内容：绑定滚动事件，同步横向偏移 -->
      <scroll-view scroll-x scroll-y class="body-scroll" bindscroll="onBodyScroll" scroll-left="{{scrollX}}">
        <view class="body-row">
          <view class="time-col body-time">
            <view wx:for="{{sectionList}}" wx:key="index" class="time-item">
              <view class="section-name">第{{item.index}}节</view>
              <view class="time-range">{{item.time}}</view>
            </view>
          </view>
          <view class="grid-container">
            <view wx:for="{{weekList}}" wx:key="date" class="day-col grid-day">
              <view
                wx:for="{{item.courseList}}"
                wx:key="id"
                class="course-card"
                style="background:{{item.bgColor}}; grid-row: {{item.start}} / span {{item.rowNum}}"
              >
                <view class="course-name">{{item.name}}</view>
                <view class="course-loc">{{item.loc}}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>