1 .概述

我們在學習微信小程式或者做專案時，應該會遇到需要時間預約功能情況，那麼這個時間預約功能我們應該怎麼編寫呢？於是就做了一個類似電商的時間預約功能，覺得有用，就獨立出來成了個小外掛，今天我們就分享這樣的小教程。希望對大家有所幫助。

不多說了，二當家要上圖來啦！

更多自ji關注下載

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

5 . 總結

注：如未能獲取成功，或者遇到其他問題，本人微信：geekxz 。

如果需要更多動畫，歡迎關注 【極客小寨】微信公眾號，回覆微信小程式預約下載連結！或者回復資源，獲取更多有用技術乾貨、文件資料。所有文件會持續更新，歡迎關注一起成長！