微信小程序——獲取當天的前一個月至後一個月

 看標題也不知道你有沒有明白我想表達的意思，先上個動態圖吧~

 須要分析：

1.獲取當前日期的前一個月，後一個月和當月。好比說如今是7月5號，我須要獲得6月5號至8月5號的日期，同時還要返回當前的星期。

2.滑動到某個月份的區間的時候，左側也相應的變到當前月份。好比我如今滑動到6月10號了，那麼左側就要顯示成6月了。

3.頁面打開默認是顯示今天。

 

實現思路：

1.獲取本月的數據（這個例子中就是從7.1至7.31）

2.獲取上個月某號至月底的數據（這個例子中就是從6.5至6.30）

3.獲取下個月1號至某號的數據（這個例子中就是從8.1至8.5）

4.獲取這個月1號，今天，和下一個月1號的scrollLeft的值，這是爲了在滑動的時候判斷它當前的日期區間是在哪一個月份，從而改變左側的月份值。（這個例子中就是從7.1，7.5，8.1這三個scrollLeft的值）

5.默認顯示今天可能經過改變scroll-view的scroll-left的值實現

 

主要用到的函數：

1.setDate(day)：設置一個月的某一天

2.setMonth(month[,day]):設置月份，day是可選參數，可填可不填。填了返回某月的某一天，不填返回某月的第1天。

3.getMonth(),getDate(),getDay():獲取月（從0開始），日期，星期（返回0時表示星期日）

 

具體代碼：

JS:

// pages/teacher/interview/index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  //獲取星期
  getWeek(date) {
    let weekArray = ['日', '一', '二', '三', '四', '五', '六'];
    return weekArray[date.getDay()];
  },

  //滑動至某個區間時顯示當前的月份
  dayScroll(e) {
    const scrollLeftArray = this.data.scrollLeftArray;
    console.log(e.detail.scrollLeft)
    let dayScrollLeft = e.detail.scrollLeft;

    if (dayScrollLeft < scrollLeftArray[0] - 100) {
      this.setData({
        showCurrentMonth: this.data.month
      })
    } else if (this.data.day < 7) {
      if (e.detail.scrollLeft > scrollLeftArray[2] - (7 - this.data.day)*100) {
        this.setData({
          showCurrentMonth: this.data.month + 2
        })
      }
    } else if (this.data.day >= 7){
      if (e.detail.scrollLeft > scrollLeftArray[2]) {
        this.setData({
          showCurrentMonth: this.data.month + 2
        })
      }
    } else {
      this.setData({
        showCurrentMonth: this.data.month + 1
      })
    }
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    const _this = this;
    let now = new Date(),
      month = now.getMonth(),
      weekday = _this.getWeek(now),
      day = now.getDate(),
      prevMonth = month==0 ? 11 : month-1,
      nextMonth = month==11 ? 0 : month+1,
      lastDay = new Date((new Date().setMonth(month + 1, 1) - 1000 * 60 * 60 * 24)).getDate(), //獲取當月最後一天日期;
      prevLastDay = new Date((new Date().setMonth(month, 1) - 1000 * 60 * 60 * 24)).getDate(); //獲取上一個月最後一天日期; 

    let currentMonthDateArray = [], //當前月份的日期和星期的數據集合
      prevMonthDateArray = [], //上月日期和星期的數據集合
      nextMonthDateArray = []; //下月日期和星期的數據集合
    for (let i = 1; i <= lastDay; i++) {
      currentMonthDateArray.push({
        day: i,
        weekDay: _this.getWeek(new Date(new Date().setDate(i)))
      })
    }

    for (let i = day; i <= prevLastDay; i++) {
      prevMonthDateArray.push({
        day: i,
        weekDay: _this.getWeek(new Date(new Date().setMonth(month - 1, i)))
      })
    }

    for (let i = 1; i <= day; i++) {
      nextMonthDateArray.push({
        day: i,
        weekDay: _this.getWeek(new Date(new Date().setMonth(month + 1, i)))
      })
    }
    _this.setData({
      day: day,
      month: month,
      weekday: weekday,
      showCurrentMonth: month + 1,
      prevMonthDateArray: prevMonthDateArray,
      currentMonthDateArray: currentMonthDateArray,
      nextMonthDateArray: nextMonthDateArray
    })

    //獲取左邊距是爲了滑動時改變月份
    const query = wx.createSelectorQuery();
    let scrollLeftArray = [];
    query.selectAll(`#day${month + 1}1, #day${month + 1}${day}, #day${month + 2}1`).boundingClientRect(function(rects) {
      rects.forEach(function(rect) {
        scrollLeftArray.push(rect.left)
      })
      _this.setData({
        scrollLeftArray: scrollLeftArray,
        scrollLeftInit: scrollLeftArray[1] - 100
      })
      console.log(scrollLeftArray)
    }).exec()
  },
})

 

wxml:

<view class='row day-wrap item-center'>
  <view class='month fs-28 fc-66 shrink'>
    <text class='fs-48'>{{showCurrentMonth}}</text>月
  </view>
  <view class='day-list grow over-hidden'>
    <scroll-view scroll-x="{{true}}" class='day-list-scroll row' bindscroll="dayScroll" scroll-left="{{scrollLeftInit}}px">
      <view class="day-item {{prevMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{prevMonthDateArray}}" wx:for-item="prevMonth" id="day{{month}}{{prevMonth.day}}">
        <view class='fs-24'>{{prevMonth.weekDay}}</view>
        <view class='fs-32 mt-3'>{{prevMonth.day}}</view>
      </view>
      <view class="day-item {{currentMonth.day == day ? 'today' : ''}} {{currentMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{currentMonthDateArray}}" wx:for-item="currentMonth" id="day{{month+1}}{{currentMonth.day}}">
        <view class='fs-24'>{{currentMonth.weekDay}}</view>
        <view class='fs-32 mt-3'>{{currentMonth.day}}</view>
      </view>
      <view class="day-item {{nextMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{nextMonthDateArray}}" wx:for-item="nextMonth" id="day{{month+2}}{{nextMonth.day}}">
        <view class='fs-24'>{{nextMonth.weekDay}}</view>
        <view class='fs-32 mt-3'>{{nextMonth.day}}</view>
      </view>
    </scroll-view>
  </view>
</view>

 

wxss:

.day-wrap{
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.month{
  padding: 0 15px;
}

.day-list-scroll{
  white-space:nowrap;
}
.day-item{
  padding: 2px 8px;
  margin-right:15px;
  text-align: center;
  display: inline-block;
  vertical-align: middle
}
.day-item.weekday{
  background-color: #f2f2f2;
}
.day-item.today{
  background-color: #ffdee8;
  color: #ff5e2f
}

 

Happy Ending~