怎么在微信小程序中实现时间预约功能
本篇文章为大家展示了怎么在微信小程序中实现时间预约功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
成都网站建设哪家好,找创新互联建站!专注于网页设计、网站建设公司、微信开发、小程序制作、集团成都企业网站定制等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:纯水机等众多领域,积累了大量丰富的经验,同时也获得了客户的一致赞赏!
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; }
上述内容就是怎么在微信小程序中实现时间预约功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
文章名称:怎么在微信小程序中实现时间预约功能
网站URL:http://myzitong.com/article/jdgphe.html