• 微信小程序实现课程表

    1.实现效果

    在这里插入图片描述

    2.实现步骤

    2.1 获取当前日期一周数据

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

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

    • 1
    • 2

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

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

    • 1
    • 2

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

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

    • 1
    • 2

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

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

    • 1
    • 2

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

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

    • 1
    • 2

    日期格式化成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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    /**
 * 获取当前日期一周内的时间
 * @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"]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

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

     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//高亮当天日期
    })
  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

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

    animation: show 1.5s ease-in-out;

@keyframes show {
  0% {
    margin-left: 20rpx;
  }
  100% {
    margin-left: 0;
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    文字倾斜

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

    • 1
    • 2

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

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

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183

    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,
    })
  },
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124

    4.更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

  • 相关阅读:
    爬虫补环境，ES6 Class在环境模拟中的应用与优势
    【iOS-UIImagePickerController访问相机和相册】
    uni-app 之 获取网络列表数据
    电商平台如何实现分账功能？
    软件工程概论
    目标检测 YOLOv5 - YOLOv5的后处理
    Python离线断网情况下安装numpy、cv2和matplotlib等常用第三方包
    Websocket集群解决方案
    Hive大白话(●三●)
    AI全流程开发难题破解之钥
  • 原文地址：https://blog.csdn.net/qq_48085286/article/details/126276542