本篇文章为大家展示了怎么在微信小程序中实现时间预约功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
成都网站建设哪家好，找创新互联建站！专注于网页设计、网站建设公司、微信开发、小程序制作、集团成都企业网站定制等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：纯水机等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞赏！
wxml
{{ item.week }}
{{ item.date }}
{{ timeItem.time }}
{{ timeItem.status }}
删除
保存
3 . js
// pages/orderTime/index.js
Page({
/**
* 页面的初始数据
*/
data: {
calendar:[],
width:0,
currentIndex:0,
currentTime: 0,
timeArr: [
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-10:00", "status": "约满" },
{ "time": "8:00-22:00", "status": "约满" }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
function getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
}
// 计算每月第一天是星期几
function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const cur_date=date.getDate();
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
//利用构造函数创建对象
function calendar(date,week){
this.date=cur_year+'-'+cur_month+'-'+date;
if(date==cur_date){
this.week = "今天";
}else if(date==cur_date+1){
this.week = "明天";
}else{
this.week = '星期' + week;
}
}
//当前月份的天数
var monthLength= getThisMonthDays(cur_year, cur_month)
//当前月份的第一天是星期几
var week = getFirstDayOfWeek(cur_year, cur_month)
var x = week;
for(var i=1;i<=monthLength;i++){
//当循环完一周后，初始化再次循环
if(x>6){
x=0;
}
//利用构造函数创建对象
that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
x++;
}
//限制要渲染的日历数据天数为7天以内（用户体验）
var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)
that.setData({
calendar: flag
})
//设置scroll-view的子容器的宽度
that.setData({
width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
select:function(event){
//为上半部分的点击事件
this.setData({
currentIndex: event.currentTarget.dataset.index
})
console.log(event.currentTarget.dataset.date)
},
selectTime:function(event){
//为下半部分的点击事件
this.setData({
currentTime: event.currentTarget.dataset.tindex
})
console.log(event.currentTarget.dataset.time)
}
})4. css
/* pages/orderTime/index.wxss */
scroll-view{
height: 128rpx;
width: 100%;
}
scroll-view .list{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
width: 1302rpx;
}
scroll-view .listItem{
text-align: center;
width: 186rpx;
height: 128rpx;
background-color: #f1f2f6;
padding-top: 30rpx;
box-sizing: border-box;
/* float: left; */
display: inline-block;
}
scroll-view .listItem text{
display: block;
}
scroll-view .listItem .name{
font-size: 30rpx;
}
scroll-view .listItem .date{
font-size: 30rpx;
}
scroll-view .current{
background-color: #76aef8;
}
scroll-view .current text{
color: #fff;
}
.time{
width: 95%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
margin-top: 30rpx;
}
.time .listItem{
width: 25%;
height: 135rpx;
text-align: center;
box-sizing: border-box;
background-color: #fff;
padding-top: 35rpx;
border: 1px solid #b9c1c8;
}
.time .listItem text{
display: block;
font-size: 30rpx;
}
.time .current{
border: 1px solid #76aef8;
}
.time .current text{
color: #76aef8;
}
.operate button{
width:300rpx;
height: 88rpx;
background-color: #fff;
}
.operate .del{
color: #e54449;
}
.operate button::after{
border: 2px solid #e54449;
}
.operate{
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
.operate button:nth-child(2):after{
border: 2px solid #e54449;
}
.operate .save{
color: #fff;
background-color: #e54449;
}
.operate{
width: 100%;
padding: 30rpx 0;
background-color: #fff;
position: fixed;
bottom: 0;
}上述内容就是怎么在微信小程序中实现时间预约功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
文章名称：怎么在微信小程序中实现时间预约功能
文章转载：
http://bzwzjz.com/article/jdgphe.html
