我们在学习微信小程序或者做项目时，应该会遇到需要时间预约功能情况，那么这个时间预约功能我们应该怎么编写呢？于是就做了一个类似电商的时间预约功能，觉得有用，就独立出来成了个小插件，今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了，上图来啦！
2. wxml
<!--pages/orderTime/index.wxml--> <view> <scroll-view scroll-x> <view> <view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" wx:key='' data-date="{{ item.date}}"> <text>{{ item.week }}</text> <text>{{ item.date }}</text> </view> </view> </scroll-view> <view> <view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-Tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap='selectTime' wx:key=''> <text>{{ timeItem.time }}</text> <text>{{ timeItem.status }}</text> </view> </view> <view> <button>删除</button> <button>保存</button> </view> </view>
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; }