首页 / JAVASCRIPT / 微信小程序实现时间预约功能

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序实现时间预约功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5466字，纯文字阅读大概需要8分钟。

内容图文

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

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

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

内容总结

以上是互联网集市为您收集整理的微信小程序实现时间预约功能全部内容，希望文章能够帮你解决微信小程序实现时间预约功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/333946.html

来源：【匿名】