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


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 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
JavaScript实现Excel表格效果
Feb 07 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中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
销售会计工作职责
2013/12/02 职场文书
高一物理教学反思
2014/01/24 职场文书
中学生班主任评语
2014/01/30 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
聘任证明怎么写
2015/03/02 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
python之json文件转xml文件案例讲解
2021/08/07 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
sql server 累计求和实现代码
2022/02/28 SQL Server
关于MySQL中explain工具的使用
2023/05/08 MySQL