一个类似电商的时间预约功能，供大家参考，具体内容如下
1 .概述
我们在学习微信小程序或者做项目时，应该会遇到需要时间预约功能情况，那么这个时间预约功能我们应该怎么编写呢？于是就做了一个类似电商的时间预约功能，觉得有用，就独立出来成了个小插件，今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了，上图来啦！
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
JavaScript中某一标签内函数用this获取不到当前标签的问题笔记
MSAL.js 2.0发布 支持授权代码流 (authorization code flow)
网友评论