微信小程序开发课程表
2020-04-17 本文已影响0人
冻冬龙东墙
课程表
页面结构
- 顶部为星期
- 左边为上课的节次
- 中间为内容部分
代码实现
顶部：考虑到我学校的大部分课程都为星期一至五；且鉴于小程序页面过小，故这里只编写星期一到五的课程（建议根据个人需求编写）
<view class="top">
<view wx:for="{{['一','二','三','四','五']}}" class="top-text">周{{item}}
</view>
</view>
左边上课节次：
<view style="background-color:;color:#7cba23;">
<view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}" class="left">
{{item}}
</view>
</view>
中间红色分割线：
<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>
课表内容部分：这部分我在css做了一些处理优化，比如课程名字过长超过的内容省略号表示(详情请看css代码)；主要为通过wx.for来循环打印数组信息，并根据索引以及数组信息来调整课表的位置以及课表背景颜色（课表数组和颜色数组在后边）
<view wx:for="{{wlist}}">
<view class="flex-item kcb-item" data-index="{{index}}" style="margin-left:{{(item.weekTime-1)*140+15}}rpx;background-color:{{colorArrays[index%8]}};margin-top:{{(item.jieCi-1)*2*100+5}}rpx;">
<view class="smalltext">
<view class="kbtext-style">{{item.courseName}}</view>
<view class="kbaddress-style" style="padding-top:5px;">
{{item.address}}
</view>
</view>
</view>
</view>
课表数组：
wlist: [
{ "weekTime": 1, "jieCi": 1, "courseName": "计算机科学与技术","address":"A1-105"},
{ "weekTime": 1, "jieCi": 5, "courseName": "毛泽东思想邓小平理论实践课程","address": "A1-105"},
{ "weekTime": 2, "jieCi": 1, "courseName": "算法思想与课程设计", "address": "A1-105" },
{ "weekTime": 2, "jieCi": 4, "courseName": "高等数学", "address": "A1-105"},
{ "weekTime": 3, "jieCi": 2, "courseName": "大学英语", "address": "A1-105"},
{ "weekTime": 3, "jieCi": 4, "courseName": "篮球", "address": "体育馆1楼-B区"},
{ "weekTime": 3, "jieCi": 3, "courseName": "电子工艺实习", "address": "A1-105"},
{ "weekTime": 4, "jieCi": 1, "courseName": "计算机网络", "address": "A1-105"},
{ "weekTime": 4, "jieCi": 4, "courseName": "JavaEE课程设计", "address": "A1-105" },
{ "weekTime": 5, "jieCi": 3, "courseName": "设计模式", "address": "A1-105" },
]
weekTime为星期几，jieCi为上课的节次（1代表1，2节；5代表9，10节...）；courseName是课程名称；address为上课地点
颜色数组：这里可以根据个人喜好定义喜欢的背景颜色
colorArrays:["#85B8CF","#90C652","#D8AA5A","#FC9F9D","#0A9A84","#61BC69","#12AEF3","#E29AAD"],
完整代码以及样式
kbcx.wxml
<!--index.wxml-->
<view class="top">
<view wx:for="{{['一','二','三','四','五']}}" class="top-text">周{{item}}
</view>
</view>
<scroll-view scroll-y="true" class="scroll">
<view style="height:1200rpx;width:730rpx;display:flex;">
<view style="background-color:;color:#7cba23;">
<view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}" class="left">
{{item}}
</view>
</view>
<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>
<view wx:for="{{wlist}}">
<view class="flex-item kcb-item" data-index="{{index}}" style="margin-left:{{(item.weekTime-1)*140+15}}rpx;background-color:{{colorArrays[index%8]}};margin-top:{{(item.jieCi-1)*2*100+5}}rpx;">
<view class="smalltext">
<view class="kbtext-style">{{item.courseName}}</view>
<view class="kbaddress-style" style="padding-top:5px;">
{{item.address}}
</view>
</view>
</view>
</view>
</view>
</scroll-view>
kbcx.js
//课表查询页面
//获取应用实例
var app = getApp()
Page({
data: {
// 颜色数组，用于课程的背景颜色
colorArrays:["#85B8CF","#90C652","#D8AA5A","#FC9F9D","#0A9A84","#61BC69","#12AEF3","#E29AAD"],
// 课表数组
wlist: [
{ "weekTime": 1, "jieCi": 1, "courseName": "计算机科学与技术","address":"A1-105"},
{ "weekTime": 1, "jieCi": 5, "courseName": "毛泽东思想邓小平理论实践课程","address": "A1-105"},
{ "weekTime": 2, "jieCi": 1, "courseName": "算法思想与课程设计", "address": "A1-105" },
{ "weekTime": 2, "jieCi": 4, "courseName": "高等数学", "address": "A1-105"},
{ "weekTime": 3, "jieCi": 2, "courseName": "大学英语", "address": "A1-105"},
{ "weekTime": 3, "jieCi": 4, "courseName": "篮球", "address": "体育馆1楼-B区"},
{ "weekTime": 3, "jieCi": 3, "courseName": "电子工艺实习", "address": "A1-105"},
{ "weekTime": 4, "jieCi": 1, "courseName": "计算机网络", "address": "A1-105"},
{ "weekTime": 4, "jieCi": 4, "courseName": "JavaEE课程设计", "address": "A1-105" },
{ "weekTime": 5, "jieCi": 3, "courseName": "设计模式", "address": "A1-105" },
]
},
})
kbcx.wxcss
.flex-item {
width: 95rpx;
height: 80px;
}
.kcb-item {
position: absolute;
justify-content: center;
display: flex;
/* align-items: center; */
border-radius: 5px;
}
.smalltext {
font-size: 8pt;
color: #fff;
padding-left: 2px;
padding-top: 2px;
}
.top {
display: flex;
flex-direction: row;
margin-left: 35rpx;
/* background-color: #d2e6b3; */
color: #7cba23;
}
.top-text {
width: 140rpx;
height: 35rpx;
font-size: 9pt;
justify-content: center;
display: flex;
align-items: center;
}
.scroll {
height: 1170rpx;
z-index: 101;
position: fixed;
}
.left {
width: 35rpx;
height: 100rpx;
font-size: 9pt;
justify-content: center;
display: flex;
align-items: center;
}
.kbtext-style{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
