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

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

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序之picker日期和时间选择器

    下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te

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

    一个类似电商的时间预约功能,供大家参考,具体内容如下 1 .概述 我们在学习微信小程序或者做项目时,应该会遇到需要时间预约功能情况,那么这个时间预约功能我们应该怎么编写呢?于是就做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件,今天我们就分享这样的小教程.希望对大家有所帮助. 不多说了,上图来啦! 2. wxml <!--pages/orderTime/index.wxml--> <view class='containt'> <scroll-view cla

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • C#开发之微信小程序发送模板消息功能

    步骤一:获取模板ID 有两个方法可以获取模版ID 通过模版消息管理接口获取模版ID 在微信公众平台手动配置获取模版ID 步骤二:页面的 <form/> 组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息.或者当用户完成支付行为,可以获取prepay_id用于发送模板消息. 步骤三:调用接口下发模板消息 今天重要的说第三步怎么实现,前面的步骤比较简单就略过. ----------------------------

  • 微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

    本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

  • 微信小程序实现的涂鸦功能示例【附源码下载】

    本文实例讲述了微信小程序实现的涂鸦功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 布局文件index.wxml: <view class="container"> <!--画布区域--> <view class="canvas_area"> <!--注意:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作--> &

  • 微信小程序自动客服功能

    微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var

  • 微信小程序实现多选功能

    本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: <!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class='answer-list'> <view class='answer-child'> <text class='answer-title'><text style='margin-right:28rpx;

  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    就在昨天,微信宣布了微信小程序开发者工具新增"云开发"功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图 1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) { var index = parseInt(e.currentTarget.dataset.index) this.setData({ HomeIndex: index }) }, 当在首页点击 分类导航时,会触发这个方法,并传回当前点击

  • 微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后

随机推荐