1.概述1.

我们在学习微信小程序或者做项目时，应该会遇到需要时间预约功能情况，那么这个时间预约功能我们应该怎么编写呢？于是就做了一个类似电商的时间预约功能，觉得有用，就独立出来成了个小插件，今天我们就分享这样的小教程。希望对大家有所帮助。

2.

不多说了，二当家要上图来啦！

3.

更多自ji关注下载

2.wxml!--pages/orderTime/index.wxml--viewclass'containt'scroll-viewclass"scroll-view_H"scroll-xviewclass'list'style'width:{{width}}rpx'viewbindtap"select"wx:for"{{calendar}}"wx:for-item"item"wx:for-index"index"data-index"{{index}}"class'listItem{{indexcurrentIndex?"current":""}}'wx:key''data-date"{{item.date}}"textclass'name'{{item.week}}/texttextclass'date'{{item.date}}/text/view/view/scroll-viewviewclass'time'viewwx:for"{{timeArr}}"wx:for-item"timeItem"wx:for-index"timeIndex"data-Tindex"{{timeIndex}}"data-time"{{timeItem.time}}"bindtap'selectTime'class'listItem{{currentTimetimeIndex?"current":""}}'wx:key''text{{timeItem.time}}/texttext{{timeItem.status}}/text/view/viewviewclass'operate'buttonclass'del'删除/buttonbuttonclass'save'保存/button/view/view3.js//pages/orderTime/index.jsPage({/***页面的初始数据*/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){varthatthis;functiongetThisMonthDays(year,month){returnnewDate(year,month,0).getDate();}//计算每月第一天是星期几functiongetFirstDayOfWeek(year,month){returnnewDate(Date.UTC(year,month-1,1)).getDay();}constdatenewDate();constcur_yeardate.getFullYear();constcur_monthdate.getMonth()+1;constcur_datedate.getDate();constweeks_ch['日','一','二','三','四','五','六'];//利用构造函数创建对象functioncalendar(date,week){this.datecur_year+'-'+cur_month+'-'+date;if(datecur_date){this.week"今天";}elseif(datecur_date+1){this.week"明天";}else{this.week'星期'+week;}}//当前月份的天数varmonthLengthgetThisMonthDays(cur_year,cur_month)//当前月份的第一天是星期几varweekgetFirstDayOfWeek(cur_year,cur_month)varxweek;for(vari1;imonthLength;i++){//当循环完一周后，初始化再次循环if(x6){x0;}//利用构造函数创建对象that.data.calendar[i]newcalendar(i,[weeks_ch[x]][0])x++;}//限制要渲染的日历数据天数为7天以内（用户体验）varflagthat.data.calendar.splice(cur_date,that.data.calendar.length-cur_date7?that.data.calendar.length:7)that.setData({calendar:flag})//设置scroll-view的子容器的宽度that.setData({width:186*parseInt(that.data.calendar.length-cur_date7?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.listItemtext{display:block;}scroll-view.listItem.name{font-size:30rpx;}scroll-view.listItem.date{font-size:30rpx;}scroll-view.current{background-color:#76aef8;}scroll-view.currenttext{color:#fff;}.time{width:95%;display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0auto;margin-top:30rpx;}.time.listItem{width:25%;height:135rpx;text-align:center;box-sizing:border-box;background-color:#fff;padding-top:35rpx;border:1pxsolid#b9c1c8;}.time.listItemtext{display:block;font-size:30rpx;}.time.current{border:1pxsolid#76aef8;}.time.currenttext{color:#76aef8;}.operatebutton{width:300rpx;height:88rpx;background-color:#fff;}.operate.del{color:#e54449;}.operatebutton::after{border:2pxsolid#e54449;}.operate{display:flex;flex-wrap:nowrap;justify-content:space-around;}.operatebutton:nth-child(2):after{border:2pxsolid#e54449;}.operate.save{color:#fff;background-color:#e54449;}.operate{width:100%;padding:30rpx0;background-color:#fff;position:fixed;bottom:0;}5.总结4.

注：如未能获取成功，或者遇到其他问题，本人微信：geekxz。

5.

如果需要更多动画，欢迎关注【极客小寨】微信公众号，回复微信小程序预约下载链接！或者回复资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！