【微信小程序】微信小程序实现未来一周时间表，时间表中显示时间段和是否可以预约或使用

一、效果图（时间为灰色为该时间段不可使用）

未选中效果                                                                  选中效果

二、分析

根据图中的效果，可以一行一行的来写，总共有7行，每一行的第一列都是周几+日期，第一列以后都是时间段。

1、处理第一列：可以写js，获取未来一周的日期和日期对应是周几

let time = util.formatDate(new Date());

let date = util.getDatesNoZero(8, time);

这个date是一个长度为8的数组，因为我们要显示从明天开始的日期，所以应该取索引为1以后的数据

以下是util

const formatDate = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()return [year, month, day].map(formatNumber).join('-')}function getDatesNoZero(days, todate) {var dateArry = [];for (var i = 0; i < days; i++) {var dateObj = dateLaterNoZero(todate, i);dateArry.push(dateObj)}return dateArry;
}function dateLaterNoZero(dates, later) {let dateObj = {};let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');let date = new Date(dates);date.setDate(date.getDate() + later);let day = date.getDay();let yearDate = date.getFullYear();let month = date.getMonth() + 1;let dayFormate = date.getDate();dateObj.time = yearDate + '-' + month + '-' + dayFormate;dateObj.week = show_day[day];return dateObj;
}module.exports = {formatDate: formatDate,getDatesNoZero: getDatesNoZero,
}

2、处理第一列之后的时间段

这个时间段需求上都是固定的，2个小时为一段，可以把时间段数据放入数组，页面上通过wx:for遍历显示。

点击某一个时间段该行会变成浅蓝色，该时间段会变成深蓝色，字体颜色变成白色，字体变粗，这些可以通过动态改变样式来实现

以第一行举例：

 {{selectArray[0].week}}{{selectArray[0].date}}{{itemName}}{{itemName}}

三、以组件形式实现

wxml：

选择时间{{time}}{{selectArray[0].week}}{{selectArray[0].date}}{{itemName}}{{itemName}}{{selectArray[1].week}}{{selectArray[1].date}}{{itemName}}{{itemName}}{{selectArray[2].week}}{{selectArray[2].date}}{{itemName}}{{itemName}}{{selectArray[3].week}}{{selectArray[3].date}}{{itemName}}{{itemName}}{{selectArray[4].week}}{{selectArray[4].date}}{{itemName}}{{itemName}}{{selectArray[5].week}}{{selectArray[5].date}}{{itemName}}{{itemName}}{{selectArray[6].week}}{{selectArray[6].date}}{{itemName}}{{itemName}}

js：

var util = require('../../utils/util.js')Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {timeArray: ["8:00", "10:30", "13:30", "16:00"],timeSlotArray: ["8:00-10:00", "10:30-12:30", "13:30-15:30", "16:00-18:00"],dataArray: [{time: [false, false, false, false]}, {time: [false, false, false, false]}, {time: [false, false, false, false]}, {time: [false, false, false, false]}, {time: [false, false, false, false]}, {time: [false, false, false, false]}, {time: [false, false, false, false]}],selectArray: [{week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}, {week: "",date: "",select: false,selectTime: ""}],time: "",selectTimeForServer: "",canSubscribe: true},/*** 组件的方法列表*/methods: {pushSchedule(scheduleMap) {var index = 0;for (var day in scheduleMap) {this.data.selectArray[index].date = dayvar scheduleDayArray = scheduleMap[day]var timeArray = this.data.dataArray[index].timefor (var i = 0; i < scheduleDayArray.length; i++) {if (scheduleDayArray[i].checked == 1) {timeArray[i] = true} else {timeArray[i] = false}}this.data.dataArray[index].time = timeArrayindex = index + 1}this.setData({selectArray: this.data.selectArray,dataArray: this.data.dataArray})},onItemClick: function(e) {var data = e.currentTarget.dataset.content;var dateArray = data.split("-")//0#8:00var dataSplitArray = data.split("#");let temp = this.data.selectArray;for (var i = 0; i < temp.length; i++) {if (i == dataSplitArray[0]) {temp[i].select = true;temp[i].selectTime = dataSplitArray[1]continue;}temp[i].select = false;temp[i].selectTime = "";}let time = util.formatDate(new Date());var timeArray = util.getDates(8, time)var dataIndex = this.data.timeArray.indexOf(dataSplitArray[1])this.setData({selectArray: temp,time: temp[dataSplitArray[0]].date + " " + temp[dataSplitArray[0]].week + " " + this.data.timeSlotArray[dataIndex],selectTimeForServer: timeArray[parseInt(dataSplitArray[0]) + 1].time + " " + this.data.timeSlotArray[dataIndex]})if (this.data.dataArray[dataSplitArray[0]].time[dataIndex]) {this.data.canSubscribe = true} else {this.data.canSubscribe = false;}this.triggerEvent('selectTime', {"time4Server": this.data.selectTimeForServer,"time": this.data.time}, {});}},lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行let time = util.formatDate(new Date());console.log(time)let date = util.getDatesNoZero(8, time);console.log(date);let temp = this.data.selectArray;for (var i = 1; i < date.length; i++) {if (i == 1) {temp[0].week = "明天";temp[0].date = date[1].time.split("-")[1] + "月" + date[1].time.split("-")[2] + "日";continue;}temp[i - 1].week = date[i].week;temp[i - 1].date = date[i].time.split("-")[1] + "月" + date[i].time.split("-")[2] + "日";}this.setData({selectArray: temp,//初始化time// time: temp[0].date +" "+ temp[0].week + " " + this.data.timeSlotArray[0]})},detached: function() {// 在组件实例被从页面节点树移除时执行},},
})

WXSS :

.root-container {display: flex;flex-direction: column;width: 710rpx;background: #f6f6f6;
}.container {width: 710rpx;display: flex;flex-direction: column;background: #fff;border-radius: 16rpx;
}.title-container {width: 710rpx;display: flex;flex-direction: row;align-items: center;
}.title {margin-left: 20rpx;margin-top: 30rpx;font-size: 36rpx;color: #333;font-weight: 700;margin-bottom: 30rpx;
}.time {margin-left: 40rpx;font-size: 32rpx;color: #59b0ff;font-weight: 700;
}.time-container {width: 710rpx;display: flex;flex-direction: column;
}.row {/* 边框样式 dotted solid double dashed 点状 实线 双线 虚线*//* border-style: solid; */border-color: #e6e6e6;width: 710rpx;display: flex;flex-direction: row;
}.date-container {border-left: none;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;border-bottom: none;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.date-container-bottom{border-left: none;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.time-tab-container {border-left: none;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;border-bottom: none;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.time-tab-container-right {border-left: none;border-right: none;border-top: 1px solid #e6e6e6;border-bottom: none;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.time-tab-container-bottom {border-left: none;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.time-tab-container-right-bottom {border-left: none;border-right: none;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;width: 142rpx;height: 106rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.date-text {font-size: 28rpx;color: #666;
}.time-tab {font-size: 32rpx;color: #333;
}
.bottom-divider{width: 710rpx;background: #ffffff;border-radius: 0 0 16rpx 16rpx;height: 40rpx;
}

四、组件的使用

先在page下的index.json中引用这个组件,然后再page下的wxml中将组件添加进来，例如

初始化数据以及展示数据：

var data = {"8月15日": [{checked: 1,day: "8月15日",startTime: "2019-08-15 08:00:00",endTime: "2019-08-15 10:00:00",timeDes: "8:00-10:00",week: "周四"}, {checked: 1,day: "8月15日",startTime: "2019-08-15 10:30:00",endTime: "2019-08-15 12:30:00",timeDes: "8:00-10:00",week: "周四"}, {checked: 1,day: "8月15日",startTime: "2019-08-15 13:30:00",endTime: "2019-08-15 15:30:00",timeDes: "8:00-10:00",week: "周四"}, {checked: 1,day: "8月15日",startTime: "2019-08-15 16:00:00",endTime: "2019-08-15 18:00:00",timeDes: "8:00-10:00",week: "周四"}]
}
this.selectTime = this.selectComponent('#select-time')
this.selectTime.pushSchedule(data)

 调用效果如下

end

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！