0.jpg
1 .概述
我们在学习微信小程序或者做项目时，应该会遇到需要时间预约功能情况，那么这个时间预约功能我们应该怎么编写呢？于是就做了一个类似电商的时间预约功能，觉得有用，就独立出来成了个小插件，今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了，二当家要上图来啦！
image
更多自ji关注下载
2. wxml
<!--pages/orderTime/index.wxml-->
<view class='containt'>
<scroll-view class="scroll-view_H" scroll-x>
<view class='list' style='width:{{ width }}rpx'>
<view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index==currentIndex? "current":""}}' wx:key='' data-date="{{ item.date}}">
<text class='name'>{{ item.week }}</text>
<text class='date'>{{ item.date }}</text>
</view>
</view>
</scroll-view>
<view class='time'>
<view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-Tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap='selectTime' class='listItem {{ currentTime==timeIndex? "current":"" }}' wx:key=''>
<text>{{ timeItem.time }}</text>
<text>{{ timeItem.status }}</text>
</view>
</view>
<view class='operate'>
<button class='del'>删除</button>
<button class='save'>保存</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;
}
5 . 总结
注：如未能获取成功，或者遇到其他问题，本人微信：geekxz 。
如果需要更多动画，欢迎关注 【极客小寨】微信公众号，回复微信小程序预约下载链接！或者回复资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！
