微信小程序实现时间预约功能

一个类似电商的时间预约功能，供大家参考，具体内容如下

1 .概述

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

不多说了，上图来啦！

2.页面结构

！-页数/订购时间/索引。wxml-view class=' containt ' scroll-view class=' scroll-view _ H ' scroll-x view class=' list ' style=' width : { { width } } rpx ' view bind tap=' select ' wx : for=' { { calendar } } ' wx : for-item=' item ' wx : for-index=' index ' data-index=' { { index } } class=' listItem { { index='当前： ' ' } } ' wx :键=' ' data-date=' { { item。 date } }“text class=”名称“{ item。week } }/text text class=' date ' { item。date } }/text/view/view/scroll-view class=' time ' view wx : for=' { { timeArr } } ' wx : for-item=' timeItem ' wx : for-index=' timeIndex ' data-Tindex=' '当前： ' ' } } ' wx :键=' ' text { { timeitem。time } }/text text { { timeitem。status } }/text/view/view view class=' operate ' button class=' del '删除/button button class='save '保存/按钮/视图/视图3 .射流研究…

//页数/订购时间/索引。js页面({/* * *页面的初始数据*/data: { calendar:[]，width:0，currentIndex:0，currentTime: 0，time arr :[{ ' time ' : ' 833:00-10:00 '，' status': '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-10:00 ','状态' : '约满' }, { '时间' : '8:00-10:00 ','状态' : '约满},{ '时间' : '8:00-22:00 ','状态' : '约满' } ] }, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ var=this 函数getThisMonthDays(年，月){返回新日期（年，月，0)。getDate()；} //计算每月第一天是星期几函数getFirstDayOfWeek(年，月){返回新日期(日期.世界协调时（年，月- 1,1))。getDay()；}常量日期=新日期();const cur _ year=date。getfull year()；const cur _ month=日期。get month()1；const cur _ date=日期。GetDate()；const weeks_ch=['日', '一', '二', '三', '四', '五', '六'];//利用构造函数创建对象函数日历(日期，星期){这。date=cur _ year '-' cur _ month '-' date；if(date==cur_date){ this.week='今天；} else if(date==cur _ date 1){ this。周='明天；}else{ this.week='星期一周；} } //当前月份的天数var monthLength=gethismonthdays(cur _ year，cur_month) //当前月份的第一天是星期几var week=get first day fweek(cur _ year，cur _ month)var x=week；for(var I=1；I=月长；i ){ //当循环完一周后，初始化再次循环if(X6){ x=0；} //利用构造函数创建对象that.data.calendar[i]=新日历(I，[weeks _ ch[x]][0])x；} //限制要渲染的日历数据天数为七天以内（用户体验)var flag=那个。数据。日历。拼接(cur _ date，即。数据。日历。length-cur _ date=7？那个。数据。日历。长度：7)。setdata({ calendar : flag })//设置滚动视图的子容器的宽度那个。setdata({ width : 186 * ParSeint(即。数据。日历。length-cur _ date=7？那个。数据。日历。长度： 7)})}，/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage : function(){ }，select:function(event){ //为上半部分的点击事件这个。setdata({ current addex :事件。当前目标。数据集。index })控制台。日志(事件。当前目标。数据集。date)}，选择times :函数(事件){//为下半部分的点击事件这个。setdata({当前时间：事件。当前目标。数据集。tindex })控制台。日志(事件。当前目标。数据集。时间)})4 .钢性铸铁

/*页数/订购时间/索引。wxss */scroll-view { height : 128 rpx；宽度： 100%;}滚动视图。列表{ display : flex flex-wrap : nowrap；正义-内容： flex-start；宽度： 1302 rpx}滚动视图listItem { text-align : center；宽度： 186 rpx高度： 128rpx背景-color : # f1f2f 6；衬垫-顶部： 30 rpx盒子尺寸：边框盒子；/*左侧浮动：*/display:内联块；}滚动视图列表项文本{显示：块；}滚动视图列表项.名称{ font-size : 30 rpx}滚动视图列表项.日期{ font-size : 30 rpx}滚动视图。当前{背景色： # 76 AEF 8；}滚动视图。当前文本{ color: # fff}。时间{宽度： 95%;显示： flex柔性包装：包装；正义-内容： flex-start；margin : 0 auto margin-top : 30 rpx；}.时间到了listItem { width : 25%；高度： 135rpx文本对齐：中心；盒子尺寸：边框盒子；背景-color : # fff；衬垫-顶部： 35 rpxborder: 1px固体# b9c1c8}。时间到了列表项文本{显示：块；font-size : 30 rpx}.时间到了。电流{ border: 1px固体# 76aef8}。时间到了。当前文本{ color: # 76aef8}。操作按钮{ width :300 rpx h8 : 88 rpx背景-color : # fff；}.操作del { color: # e54449}。{边框： 2px实心# e 54449 }后操作按钮：}.操作{ display : flex flex-wrap : nowrap；证明内容：空间环绕；}.操作按钮： th-child(2):后{ border : 2px solid # e 54449}.操作。保存{ color: # fff背景-颜色： # e 54449}.操作{宽度： 100%；padd : 30 rpx 0；背景-color : # fff；位置：固定；底部： 0；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。