课程表制作

课程表制作

使用微信小程序制作的课程表

//index.wxml文件

<view>
  <view class="top">
    <view wx:for="{{['一','二','三','四','五','六','日']}}" class="top-text">
      周{{item}}
    </view>
  </view>
</view>
<view style="display:flex;flex-direction:row;background:#D2E6B3">
  <view style="color:#7cba23;">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}" class="left">
      {{item}}
    </view>
  </view>
  <!-- <view wx:for="{{[1,2,3,4,5,6,7,8,9,10]}}">
    <view style="width:750rpx;margin-top:{{(index+1)*100}}rpx;  position: absolute;border-bottom:1rpx solid {{index==3?'red':'lightgray'}};">
    </view>
  </view> -->
  <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+10}}rpx;height:{{item.skcd*100-5}}rpx;background-color:{{colorArrays[index%9]}}">
      <view class="smalltext">{{item.kcmc}}</view>
    </view>
  </view>
</view>

index.wxss

.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;
  border: 1px solid gray;
}
.left {
  width: 35rpx;
  height: 100rpx;
  font-size: 9pt;
  justify-content: center;
  display: flex;
  align-items: center;
  border: 1px solid gray;
}

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

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

index.js文件

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    colorArrays: ["#85B8CF", "#C0C652", "#D8AA5A", "#FC9F9D", "#0A9A84", "#61BC69", "#12AEF3", "#E29AAD"], 
    wlist: [
      { "xqj": 1, "skjc": 1, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 1, "skjc": 5, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 2, "skjc": 1, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 2, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 4, "skcd": 1, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 8, "skcd": 1, "kcmc": "高等数学@教A-301" },
      { "xqj": 3, "skjc": 5, "skcd": 2, "kcmc": "高等数学@教A-301" },
      { "xqj": 4, "skjc": 2, "skcd": 3, "kcmc": "高等数学@教A-301" },
      { "xqj": 4, "skjc": 8, "skcd": 2, "kcmc": "高等数学@教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" },
    ],
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})