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


Posted in Javascript onNovember 27, 2018

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

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 相关文章推荐
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 #Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 #Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 #Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python如何在循环引用中管理内存
2018/03/20 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
用python写PDF转换器的实现
2020/10/29 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
总务岗位职责
2013/11/19 职场文书
学生手册评语
2014/05/05 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
给老师的一封感谢信
2015/01/20 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python