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-11
week: "星期" + "日一二三四五六".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;
}
}
文字倾斜文章来源:https://www.toymoban.com/news/detail-492569.html
font-style: italic;
/* 斜体 font-style:oblique;或者 font-style: italic;*/
点击课表详情弹框过渡效果
注意:transition不能生效于一个从无到有的元素。文章来源地址https://www.toymoban.com/news/detail-492569.html
.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,
})
},
})
4.更多小程序demo,尽在苏苏的码云如果对你有帮助,欢迎你的star+订阅!
到了这里,关于微信小程序实现课程表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!