微信小程序实现课程表

1.实现效果

在这里插入图片描述

2.实现步骤

2.1 获取当前日期一周数据

Date.getDay():
getDay() 方法返回指定日期是星期几（从 0 到 6,星期日为 0，星期一为 1，依此类推。）。

var d = new Date();//2022-8-11
var n = d.getDay();//4--周四

Date.getDate():
getDate() 方法返回指定日期在月中的第几天（从 1 到 31）。

var d = new Date();//2022-8-11
var n = d.getDate();//11

Date.setDate(day):
setDate() 方法将月份中的某一天设置为日期对象。

var d = new Date();//2022-8-11
d.setDate(15);//Mon Aug 15 2022 23:17:45 GMT+0800 (中国标准时间)

Date.getFullYear()
getFullYear() 方法可返回一个表示年份的 4 位数字。

var d = new Date():
var n = d.getFullYear();//2022

Date.getMonth() :
getMonth() 方法可返回表示月份的数字。返回值是 0（一月）到 11（十二月）之间的一个整数。( 一月为 0, 二月为 1, 以此类推。)

var d = new Date();
var n = d.getMonth();//7

日期格式化成yyyy-mm-dd格式：

/*** 格式化日期* @param {*} time */
export const formateDate = (time) => {let year = time.getFullYear();let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();return year + '-' + month + '-' + day;
}

根据当前日期获取本周内数据

/*** 获取当前日期一周内的时间* @param {*} data 日期Date*/
export const getCurrWeekList = (data) => {//根据日期获取本周周一~周日的年-月-日let weekList = [],date = new Date(data);//获取当前日期为周一的日期date.setDate(date.getDay() == "0" ? date.getDate() - 6 : date.getDate() - date.getDay() + 1);// push周一数据weekList.push(formateDate(date));console.log(weekList)//push周二以后日期for (var i = 0; i < 6; i++) {date.setDate(date.getDate() + 1);weekList.push(formateDate(date));}return weekList;
}
//["2022-08-08", "2022-08-09", "2022-08-10", "2022-08-11", "2022-08-12", "2022-08-13", "2022-08-14"]

将得到的一周数据，拼接成我们想要的内容

 let time = new Date(),list = getCurrWeekList(time),weekList = []list.forEach(item => {weekList.push({day: [item.split('-')[1], item.split('-')[2]].join('-'),//取字段eg：08-11week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),//对应周几isCurr: formateDate(time) == item//高亮当天日期})});

2.2 页面布局及过渡动画等效果

页面布局
在这里插入图片描述
列表过渡动画

animation: show 1.5s ease-in-out;@keyframes show {0% {margin-left: 20rpx;}100% {margin-left: 0;}
}

文字倾斜

  font-style: italic;/* 斜体 font-style:oblique;或者 font-style: italic;*/

点击课表详情弹框过渡效果
注意：transition不能生效于一个从无到有的元素。


.modal.noShow {top: -0%;opacity: 0;transition: all 1s;
}.modal.show {top: 50%;transition: all 1s;opacity: 1;
}

2.3 课表数据

如页面布局中，黑框数据为一组，一行最多7条数据,排除周六日，正常最多为5条数据。
针对无数据项，正常添加数据（为补齐页面，页面对齐），为该项设置type为0（表示无数据），并且过滤点击详情事件。

3.实现代码

3.1 页面

<view class="flex-row head"><view class="head-left flex-column j_c"><image src="https://s3.bmp.ovh/imgs/2022/07/27/6289fe4ab016c74a.png" class="head-icon" /><text class="head-left-text one">第</text><text class="head-left-text two">周</text><text class="head-curr-week">{{currentWeek}}</text></view><view class="head-right flex-row j_b"><view class="flex-column j_c" wx:for="{{weekList}}" wx:key="list"><text class="head-week {{item.isCurr && 'head-right-curr'}}">{{item.week}}</text><text class=" {{item.isCurr && 'head-right-curr'}}">{{item.isCurr?'今天':item.day}}</text></view></view>
</view>
<view class="container flex-row mb20"><view class="container-left flex-column j_b"><block wx:for="{{time.one}}" wx:key="list"><view class="flex-column j_c"><text class="con-title">{{item.index}}</text><text>{{item.timeStart}}</text><text>{{item.timeEnd}}</text></view></block></view><view class="container-right  flex col j_c"><view class="flex-row mb10"><view class="con-item flex-column j_c " wx:for="{{schedule.one}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}"><text class="con-item-subj line_ellipsis">{{item.sub}}</text><text class="line_ellipsis">{{item.tec}}</text><text class="line_ellipsis">{{item.add}}</text></view></view><view class="flex-row"><view class="con-item flex-column j_c " wx:for="{{schedule.two}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}"><text class="con-item-subj">{{item.sub}}</text><text>{{item.tec}}</text><text>{{item.add}}</text></view></view><image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" /></view>
</view>
<view class="container flex-row mb20"><view class="container-left left1"><block wx:for="{{time.two}}" wx:key="list"><view class="flex-column j_c"><text class="con-title">{{item.index}}</text><text>{{item.timeStart}}</text><text>{{item.timeEnd}}</text></view></block></view><view class="container-right right1  flex col j_c"><view class="flex-row"><view class="con-item flex-column j_c " wx:for="{{schedule.three}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}"><text class="con-item-subj line_ellipsis">{{item.sub}}</text><text class="line_ellipsis">{{item.tec}}</text><text class="line_ellipsis">{{item.add}}</text></view></view><image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" /></view>
</view>
<view class="container flex-row"><view class="container-left left1"><block wx:for="{{time.three}}" wx:key="list"><view class="flex-column j_c"><text class="con-title">{{item.index}}</text><text>{{item.timeStart}}</text><text>{{item.timeEnd}}</text></view></block></view><view class="container-right right1 flex col j_c"><view class="flex-row"><view class="con-item flex-column j_c " wx:for="{{schedule.four}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}"><text class="con-item-subj line_ellipsis">{{item.sub}}</text><text class="line_ellipsis">{{item.tec}}</text><text class="line_ellipsis">{{item.add}}</text></view></view><image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" /></view>
</view>
<!-- 详情弹框 -->
<view class="mask" hidden="{{!isShow}}" catchtap="close"></view>
<view class="modal flex-column j_c {{isShow ? 'show':'noShow'}}" style="background: {{current.color}};"><view>{{current.sub}}</view><view>{{current.add}}</view><view>{{current.tec}}</view>
</view>

3.2 样式

page {padding: 30rpx 20rpx;
}.head {margin-bottom: 20rpx;
}.head-left {border-radius: 10rpx;height: 125rpx;background: #fff;width: 90rpx;margin-right: 10rpx;position: relative;
}.head-left-text {position: absolute;color: #7e7a7a;font-size: 22rpx;
}.head-curr-week {font-weight: bold;font-size: 30rpx;font-style: italic;/* 斜体 font-style:oblique;或者 font-style: italic;*/
}.head-left-text.one {right: 2px;top: 2px;
}.head-left-text.two {left: 2px;bottom: 2px;
}.head-week {font-weight: bold;margin-bottom: 10rpx;color: #333;
}.head-right-curr {color: pink;
}.head-icon {position: absolute;width: 40rpx;height: 40rpx;top: -10rpx;left: -10rpx;
}.head-right {border-radius: 10rpx;height: 125rpx;background: #fff;width: 610rpx;font-size: 23rpx;box-sizing: border-box;padding: 0 10rpx;color: #7e7a7a;
}.con-title {font-weight: bold;margin-bottom: 6rpx;color: #333;font-size: 27rpx;font-style: italic;
}.container-left {border-radius: 10rpx;height: 500rpx;background: #fff;width: 90rpx;margin-right: 10rpx;box-sizing: border-box;padding: 20rpx 0;font-size: 24rpx;color: #7e7a7a;
}.container-right {border-radius: 10rpx;height: 500rpx;background: #fff;width: 610rpx;position: relative;box-sizing: border-box;padding: 20rpx 10rpx;
}.con-icon {position: absolute;width: 50rpx;height: 50rpx;bottom: -10rpx;right: -10rpx;
}.container-left.left1,
.container-right.right1 {height: 250rpx;
}.con-item {width: 80rpx;height: 225rpx;border-radius: 10rpx;margin-right: 7rpx;flex-shrink: 0;font-size: 17rpx;color: #fff;box-sizing: border-box;padding: 10rpx;line-height: 28rpx;animation: show 1.5s ease-in-out;
}@keyframes show {0% {margin-left: 20rpx;}100% {margin-left: 0;}
}.con-item-subj {font-weight: bold;font-size: 19rpx;margin-bottom: 5rpx;
}.con-item:last-child {margin-right: 0;
}/* 多行文字换行 */
.line_ellipsis {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}/* 弹框 */
.modal {width: 550rpx;height: 350rpx;border-radius: 20rpx;position: fixed;z-index: 1111;left: 50%;transform: translate(-50%, -50%);background: #fff;box-sizing: border-box;padding: 20px;color: #7e7a7a;font-size: 27rpx;line-height: 40rpx;
}.modal.noShow {top: -0%;opacity: 0;transition: all 1s;
}.modal.show {top: 50%;transition: all 1s;opacity: 1;
}

3.3 交互

import {getCurrWeekList,formateDate
} from '../utils/tools'
Page({data: {currentWeek: 10,time: {one: [{index: 1,timeStart: '08:00',timeEnd: '08:45'},{index: 2,timeStart: '08:55',timeEnd: '09:40'},{index: 3,timeStart: '09:50',timeEnd: '10:45'},{index: 4,timeStart: '10:50',timeEnd: '11:35'}],two: [{index: 5,timeStart: '13:30',timeEnd: '14:15'},{index: 6,timeStart: '14:25',timeEnd: '15:10'},],three: [{index: 7,timeStart: '15:20',timeEnd: '16:05'},{index: 8,timeStart: '16:15',timeEnd: '17:00'},]},schedule: {one: [{sub: '编译原理',add: 'B202',tec: "苏苏苏",color: '#fad0c4',type: 1, //0-无  1-有},{sub: '',add: '',tec: "",color: '',type: 0,}, {sub: '操作系统',add: 'N502',tec: "苏苏苏",color: '#ff9a9e',type: 1,},{sub: '',add: '',tec: "",color: '',type: 0,},{sub: '',add: '',tec: "",color: '',type: 0,},],....},weekList: [],isShow: false,current: {},},getDetail(e) {let {item} = e.currentTarget.dataset;this.setData({current: item,isShow: true})},close() {this.setData({isShow: false})},onShow() {let time = new Date(),list = getCurrWeekList(time),weekList = []list.forEach(item => {weekList.push({day: [item.split('-')[1], item.split('-')[2]].join('-'),week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),isCurr: formateDate(time) == item})});this.setData({weekList,})},
})