【微信小程序】微信小程序實現未來一週時間表，時間表中顯示時間段和是否可以預約或使用

一、效果圖（時間爲灰色爲該時間段不可使用）

未選中效果選中效果

二、分析

根據圖中的效果，可以一行一行的來寫，總共有7行，每一行的第一列都是周幾+日期，第一列以後都是時間段。

1、處理第一列：可以寫js，獲取未來一週的日期和日期對應是周幾

let time = util.formatDate(new Date());

let date = util.getDatesNoZero(8, time);

這個date是一個長度爲8的數組，因爲我們要顯示從明天開始的日期，所以應該取索引爲1以後的數據

以下是util

const formatDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')

}

function getDatesNoZero(days, todate) {
  var dateArry = [];
  for (var i = 0; i < days; i++) {
    var dateObj = dateLaterNoZero(todate, i);
    dateArry.push(dateObj)
  }
  return dateArry;
}

function dateLaterNoZero(dates, later) {
  let dateObj = {};
  let show_day = new Array('週日', '週一', '週二', '週三', '週四', '週五', '週六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  let yearDate = date.getFullYear();
  let month = date.getMonth() + 1;
  let dayFormate = date.getDate();
  dateObj.time = yearDate + '-' + month + '-' + dayFormate;
  dateObj.week = show_day[day];
  return dateObj;
}

module.exports = {
  formatDate: formatDate,
  getDatesNoZero: getDatesNoZero,
}

2、處理第一列之後的時間段

這個時間段需求上都是固定的，2個小時爲一段，可以把時間段數據放入數組，頁面上通過wx:for遍歷顯示。

點擊某一個時間段該行會變成淺藍色，該時間段會變成深藍色，字體顏色變成白色，字體變粗，這些可以通過動態改變樣式來實現

以第一行舉例：

 <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

三、以組件形式實現

wxml：

<view class='root-container'>
  <view class='container'>
    <view class='title-container'>
      <text class='title'>選擇時間</text>
      <text class='time'>{{time}}</text>
    </view>
    <view class='time-container'>
      <view class='row' style='background:{{selectArray[0].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[0].week}}</text>
          <text class='date-text'>{{selectArray[0].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[0].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[0].selectTime?"#ffffff":dataArray[0].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[0].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[1].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[1].week}}</text>
          <text class='date-text'>{{selectArray[1].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[1].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='1#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[1].selectTime?"#ffffff":dataArray[1].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[1].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[2].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[2].week}}</text>
          <text class='date-text'>{{selectArray[2].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[2].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='2#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[2].selectTime?"#ffffff":dataArray[2].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[2].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[3].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[3].week}}</text>
          <text class='date-text'>{{selectArray[3].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[3].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='3#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[3].selectTime?"#ffffff":dataArray[3].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[3].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
      <view class='row' style='background:{{selectArray[4].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[4].week}}</text>
          <text class='date-text'>{{selectArray[4].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[4].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='4#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[4].selectTime?"#ffffff":dataArray[4].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[4].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[5].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container'>
          <text class='date-text'>{{selectArray[5].week}}</text>
          <text class='date-text'>{{selectArray[5].date}}</text>
        </view>
        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right' style='background:{{itemName==selectArray[5].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='5#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[5].selectTime?"#ffffff":dataArray[5].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[5].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>

      <view class='row' style='background:{{selectArray[6].select?"#E0F0FF":"#ffffff"}}'>
        <view class='date-container-bottom'>
          <text class='date-text'>{{selectArray[6].week}}</text>
          <text class='date-text'>{{selectArray[6].date}}</text>
        </view>

        <block wx:for="{{timeArray}}" wx:for-index="idx" wx:for-item="itemName" wx:key="">
          <view wx:if="{{idx != 3}}" class='time-tab-container-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
          <view wx:if="{{idx == 3}}" class='time-tab-container-right-bottom' style='background:{{itemName==selectArray[6].selectTime?"#59B0FF":""}}' data-content='0#{{itemName}}' data-content='6#{{itemName}}' bindtap='onItemClick'>
            <text class='time-tab' style='color:{{itemName==selectArray[6].selectTime?"#ffffff":dataArray[6].time[idx]?"#333333":"#CCCCCC"}};font-weight:{{itemName==selectArray[6].selectTime?700:normal}}'>{{itemName}}</text>
          </view>
        </block>
      </view>
    </view>
    <view class='bottom-divider' />
  </view>
</view>

js：

var util = require('../../utils/util.js')

Component({
  /**
   * 組件的屬性列表
   */
  properties: {},

  /**
   * 組件的初始數據
   */
  data: {
    timeArray: ["8:00", "10:30", "13:30", "16:00"],
    timeSlotArray: ["8:00-10:00", "10:30-12:30", "13:30-15:30", "16:00-18:00"],
    dataArray: [{
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }, {
      time: [false, false, false, false]
    }],
    selectArray: [{
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }, {
      week: "",
      date: "",
      select: false,
      selectTime: ""
    }],
    time: "",
    selectTimeForServer: "",
    canSubscribe: true
  },

  /**
   * 組件的方法列表
   */
  methods: {
    pushSchedule(scheduleMap) {
      var index = 0;
      for (var day in scheduleMap) {
        this.data.selectArray[index].date = day
        var scheduleDayArray = scheduleMap[day]
        var timeArray = this.data.dataArray[index].time
        for (var i = 0; i < scheduleDayArray.length; i++) {
          if (scheduleDayArray[i].checked == 1) {
            timeArray[i] = true
          } else {
            timeArray[i] = false
          }
        }
        this.data.dataArray[index].time = timeArray
        index = index + 1
      }
      this.setData({
        selectArray: this.data.selectArray,
        dataArray: this.data.dataArray
      })
    },
    onItemClick: function(e) {
      var data = e.currentTarget.dataset.content;
      var dateArray = data.split("-")
      //0#8:00
      var dataSplitArray = data.split("#");
      let temp = this.data.selectArray;
      for (var i = 0; i < temp.length; i++) {
        if (i == dataSplitArray[0]) {
          temp[i].select = true;
          temp[i].selectTime = dataSplitArray[1]
          continue;
        }
        temp[i].select = false;
        temp[i].selectTime = "";
      }
      let time = util.formatDate(new Date());
      var timeArray = util.getDates(8, time)
      var dataIndex = this.data.timeArray.indexOf(dataSplitArray[1])
      this.setData({
        selectArray: temp,
        time: temp[dataSplitArray[0]].date + " " + temp[dataSplitArray[0]].week + " " + this.data.timeSlotArray[dataIndex],
        selectTimeForServer: timeArray[parseInt(dataSplitArray[0]) + 1].time + " " + this.data.timeSlotArray[dataIndex]
      })

      if (this.data.dataArray[dataSplitArray[0]].time[dataIndex]) {
        this.data.canSubscribe = true
      } else {
        this.data.canSubscribe = false;
      }

      this.triggerEvent('selectTime', {
        "time4Server": this.data.selectTimeForServer,
        "time": this.data.time
      }, {});
    }
  },

  lifetimes: {
    attached: function() {
      // 在組件實例進入頁面節點樹時執行

      let time = util.formatDate(new Date());
      console.log(time)
      let date = util.getDatesNoZero(8, time);
      console.log(date);
      let temp = this.data.selectArray;
      for (var i = 1; i < date.length; i++) {
        if (i == 1) {
          temp[0].week = "明天";
          temp[0].date = date[1].time.split("-")[1] + "月" + date[1].time.split("-")[2] + "日";
          continue;
        }
        temp[i - 1].week = date[i].week;
        temp[i - 1].date = date[i].time.split("-")[1] + "月" + date[i].time.split("-")[2] + "日";
      }
      this.setData({
        selectArray: temp,
        //初始化time
        // time: temp[0].date +" "+ temp[0].week + " " + this.data.timeSlotArray[0]
      })
    },
    detached: function() {
      // 在組件實例被從頁面節點樹移除時執行
    },

  },
})

WXSS :

.root-container {
  display: flex;
  flex-direction: column;
  width: 710rpx;
  background: #f6f6f6;
}

.container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16rpx;
}

.title-container {
  width: 710rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title {
  margin-left: 20rpx;
  margin-top: 30rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: 700;
  margin-bottom: 30rpx;
}

.time {
  margin-left: 40rpx;
  font-size: 32rpx;
  color: #59b0ff;
  font-weight: 700;
}

.time-container {
  width: 710rpx;
  display: flex;
  flex-direction: column;
}

.row {
  /* 邊框樣式 dotted solid double dashed 點狀 實線 雙線 虛線*//* border-style: solid; */
  border-color: #e6e6e6;
  width: 710rpx;
  display: flex;
  flex-direction: row;
}

.date-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.date-container-bottom{
 border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time-tab-container {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-bottom {
  border-left: none;
  border-right: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-tab-container-right-bottom {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  width: 142rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-text {
  font-size: 28rpx;
  color: #666;
}

.time-tab {
  font-size: 32rpx;
  color: #333;
}
.bottom-divider{
  width: 710rpx;
  background: #ffffff;
  border-radius: 0 0 16rpx 16rpx;
  height: 40rpx;
}

四、組件的使用

先在page下的index.json中引用這個組件,然後再page下的wxml中將組件添加進來，例如

<my-select-time id="select-time" />

初始化數據以及展示數據：

var data = {
	"8月15日": [{
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 08:00:00",
		endTime: "2019-08-15 10:00:00",
		timeDes: "8:00-10:00",
		week: "週四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 10:30:00",
		endTime: "2019-08-15 12:30:00",
		timeDes: "8:00-10:00",
		week: "週四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 13:30:00",
		endTime: "2019-08-15 15:30:00",
		timeDes: "8:00-10:00",
		week: "週四"
	}, {
		checked: 1,
		day: "8月15日",
		startTime: "2019-08-15 16:00:00",
		endTime: "2019-08-15 18:00:00",
		timeDes: "8:00-10:00",
		week: "週四"
	}]
}
this.selectTime = this.selectComponent('#select-time')
this.selectTime.pushSchedule(data)

調用效果如下

end

【微信小程序】微信小程序實現未來一週時間表，時間表中顯示時間段和是否可以預約或使用

EXCEL中下拉菜單中添加新選項或者刪除選項

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Java中止線程的方式

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

HTTP協議相關文檔

和findViewById說拜拜，3種方法總有一款適合你

在Android中使用AspectJX框架遇到的配置問題

Android Splash啓動頁秒開方案，適配全面屏

解決Android性能分析工具systrace使用時找不到tag或者找不到section name

【微信小程序】微信小程序實現未來一週時間表，時間表中顯示時間段和是否可以預約或使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結