<view class='wrap'>   <view>     <view class='date-show'>       <view class='lt-arrow' bindtap='lastMonth'>         <image src='../images/nextMonth.png' mode='aspectFit'></image>       </view>       {{year}}年{{month}}月       <view class='rt-arrow' bindtap='nextMonth'>         <image src='../images/nextMonth.png' mode='aspectFit'></image>       </view>     </view>   </view>   <view class='header'>     <view wx:for='{{date}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view>   </view>   <view class='date-box'>     <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}'>            <view class='date-head'>         <view>{{item.dateNum}}</view>       </view>       <view class='date-weight'>{{item.weight}}</view>     </view>   </view> </view> 

.date-show{   position: relative;   width: 250rpx;   font-family: PingFang-SC-Regular;   font-size: 40rpx;   color: #282828;   text-align: center;   margin: 59rpx auto 10rpx; } .lt-arrow,.rt-arrow{   position: absolute;   top: 1rpx;   width: 60rpx;   height: 60rpx; } .lt-arrow image,.rt-arrow image{   width: 14rpx;   height: 26rpx; } .lt-arrow{   left: -110rpx;   transform: rotate(180deg); } .rt-arrow{   right: -100rpx; } .header{   font-size: 0;   padding: 0 24rpx; } .header>view{   display: inline-block;   width: 14.285%;   color: #333;   font-size: 30rpx;   text-align: center;   border-bottom: 1px solid #D0D0D0;   padding: 39rpx 0; } .weekMark{   position: relative; } .weekMark view{   position: absolute;   bottom: 0;   left: 0;   width: 100%;   border-bottom: 1px solid #22A7F6; } .date-box{   font-size: 0;   padding: 10rpx 0; } .date-box>view{   position: relative;   display: inline-block;   width: 14.285%;   color: #020202;   font-size: 40rpx;   text-align: center;   vertical-align: middle;   margin: 15rpx 0; } .date-head{   height: 60rpx;   line-height: 60rpx;   font-size: 26rpx; } .nowDay .date-head{   width: 60rpx;   border-radius: 50%;   text-align: center;   color: #fff;   background-color: #22A7F6;   margin: 0 auto; } .date-weight{   font-size: 22rpx;   padding: 15rpx 0; } .nowDay .date-weight{   color: #22A7F6; } .one{   position: absolute;   bottom: 0;   right: 5rpx;   width: 20rpx;   height: 20rpx;   border-radius: 50%;   background-color: red; } .two{   position: absolute;   bottom: 30rpx;   right: 5rpx;   width: 20rpx;   height: 20rpx;   border-radius: 50%;   background-color: blue; } 

//index.js //獲取應用實例 const app = getApp()  Page({  data: {     year: 0,     month: 0,     date: ['日', '一', '二', '三', '四', '五', '六'],     dateArr: [],     isToday: 0,     isTodayWeek: false,     todayIndex: 0   },  onLoad: function () {     let now = new Date();     let year = now.getFullYear();     let month = now.getMonth() + 1;     this.dateInit();     this.setData({       year: year,       month: month,       isToday: '' + year + month + now.getDate()     })  },  dateInit: function(setYear,setMonth){     //全部時間的月份都是按0~11基準，顯示月份才+1     let dateArr = [];            //需要遍歷的日歷數組數據     let arrLen = 0;             //dateArr的數組長度     let now = setYear ? new Date(setYear,setMonth) : new Date();     let year = setYear || now.getFullYear();     let nextYear = 0;     let month = setMonth || now.getMonth();         //沒有+1方便后面計算當月總天數     let nextMonth = (month + 1) > 11 ? 1 : (month + 1);        let startWeek = new Date( year+','+(month + 1)+','+1).getDay();             //目標月1號對應的星期     let dayNums = new Date(year,nextMonth,0).getDate();       //獲取目標月有多少天     let obj = {};         let num = 0;          if(month + 1 > 11){       nextYear = year + 1;       dayNums = new Date(nextYear,nextMonth,0).getDate();     }     arrLen = startWeek + dayNums;     for(let i = 0; i < arrLen; i++){       if(i >= startWeek){         num = i - startWeek + 1;         obj = {           isToday: '' + year + (month + 1) + num,           dateNum: num,           weight: 5         }       }else{         obj = {};       }       dateArr[i] = obj;     }     this.setData({       dateArr: dateArr     })      let nowDate = new Date();     let nowYear = nowDate.getFullYear();     let nowMonth = nowDate.getMonth() + 1;     let nowWeek = nowDate.getDay();     let getYear = setYear || nowYear;     let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;      if (nowYear == getYear && nowMonth == getMonth){       this.setData({         isTodayWeek: true,         todayIndex: nowWeek       })     }else{       this.setData({         isTodayWeek: false,         todayIndex: -1       })     }   },   lastMonth: function(){     //全部時間的月份都是按0~11基準，顯示月份才+1     let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;     let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;     this.setData({       year: year,       month: (month + 1)     })     this.dateInit(year,month);   },   nextMonth: function(){     //全部時間的月份都是按0~11基準，顯示月份才+1     let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;     let month = this.data.month > 11 ? 0 : this.data.month;     this.setData({       year: year,       month: (month + 1)     })     this.dateInit(year, month);   } })