images.jpg
這個日歷應該是網頁中常見的小功能了，這個也是window下的時間顯示器，這篇文章，就來實現下這個效果的小程序版本，哈哈，求個贊! 這個可以當做小程序學習的一個很好的實例啦，底部有下載鏈接，有需要的可以下載查看源碼~去我個人網站瀏覽效果更好一些哈傳送門zhengyepan
image
一、實現的思路
寫js的時候，最重要的就是思路了，先有思路在用思路去做細節實現。首先呢，我來說下我的思路，不同人寫同種效果可能有不同思路，不能說誰的思路厲害，但是有句話說的好，不管黑貓白貓，能抓到老鼠的就是好貓，同樣道理。當然了，嚴謹的思路更加容易維護代碼啦~
思路：
當月有多少天
當月第一天星期幾
日歷一行有七個格子，對應周日到周六（周日算一周的開始），每月最多31天，最少28天，根據前兩個條件來決定要顯示多少行，如果當月第一天不是周日的話，則第一排前面的格子有上月天數的填滿，如果當月最后一天不是周六，則剩下的格子有下月天數補上。
4.我需要是我只要傳入一個年份月份參數給一個函數，它就會自動渲染日歷格子 例如：calendar(year,month)
根據上面的思路我們來具體實現它。
wxml
<!--wxml-->
<view class="calendar">
<view class="flex calendar-choose">
<view class="tc mouth-wrap">
<view class="fl prev-mouth" data-handle="prev" bindtap="handleMonth">
<text class="iconfont icon-zuoyouqiehuan"></text>
</view>
<view class="mouth-picker">
<picker value="{{cur_month}}" range="{{monthList}}" bindchange="chooseMonth">
<view class="picker">{{cur_month+1}}月</view>
</picker>
</view>
<view class="fr next-mouth" data-handle="next" bindtap="handleMonth">
<text class="iconfont icon-zuoyouqiehuan1"></text>
</view>
</view>
<view class="year-wrap">
<picker class="tr" value="{{itemIndex}}" range="{{yearList}}" style="width:200rpx;" bindchange="chooseYear">
<view class="picker">{{yearList[itemIndex]}}年</view>
</picker>
<view class="iconfont icon-xia"></view>
</view>
</view>
<view>
<view class="flex week-list">
<view class="week-itm" wx:for="{{weeklist}}">{{item}}</view>
</view>
<view class="flex days-list">
<view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev" bindtap="handleMonth">
<text>{{item}}</text>
</view>
<block wx:for="{{currentMonthDaysList}}">
<view class="day">
<text>{{item}}</text>
</view>
</block>
<view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" bindtap="handleMonth">
<text>{{item}}</text>
</view>
</view>
</view>
</view>
wxss
/**app.wxss**/
.calendar{overflow-x:hidden;}
.calendar-choose{height:100rpx;line-height:100rpx;background:#fefefe;padding:0 30rpx;
font-size:34rpx;color:#353535;border-bottom: 1rpx solid #e5e5e5;}
.calendar .mouth-wrap{flex: 1;display: flex;justify-content: space-between;}
.mouth-wrap .iconfont{color:#b6b6b6;font-size: 50rpx;}
.calendar .mouth-wrap>view{display: inline-block;text-align: center;}
.calendar .mouth-picker{width:200rpx;}
.calendar .prev-mouth{width:100rpx;}
.calendar .next-mouth{width:100rpx;}
.calendar .year-wrap{width:200rpx;-webkit-display: flex;display: flex;
-webkit-justify-content:center;justify-content: center;}
.calendar .year-wrap .picker{text-align: center;}
.calendar .week-list{line-height: 60rpx;background:#b9c4c9;}
.calendar .week-list .week-itm{flex:1;text-align: center;font-size:28rpx;color:#fff;}
.calendar .days-list{-webkit-flex-wrap: wrap;flex-wrap: wrap;width:99.995%;}
.calendar .days-list .day{width: 14.285%;height:60rpx;border-right:1rpx solid #e5e5e5;
border-bottom:1rpx solid #e5e5e5;color:#333;position: relative;text-align: center;line-height: 60rpx;}
.calendar .days-list .lm,.calendar .days-list .nm{color:#b6b6b6;}
.calendar .day .ep{color:#333;}
最關鍵的wxs(也就是js啦,因為都寫在一起瀏覽效果不佳，我把wxs分開寫哈，)
Page({
data: {
weeklist: ['日', '一', '二', '三', '四', '五', '六'],
itemIndex: 10, //當前年份的數組下標
}, //這個值和年份的前后一致的值相等，要注意就是年份訪問時一當前年為切割點，
/** //前后年份范圍的數值相等比較好計算，當然看需求而定啦。
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var that = this;
var cur_year = new Date().getFullYear(); //獲取當前年
var cur_month = new Date().getMonth(); //獲取當前月
that.setData({
dataTime: cur_year + "-" + cur_month + "-01"
});
that.calendar(cur_year, cur_month);
//拿到當前的年月，渲染第一次進來小程序的日期數據
that.setData({
cur_year,
cur_month,
});
},
//頁面相關事件處理函數--監聽用戶下拉動作
onPullDownRefresh: function () {
},
/**
頁面上拉觸底事件的處理函數
**/
onReachBottom: function () {
},
/*
用戶點擊右上角分享
*/
onShareAppMessage: function () {
return {
title: '簡單日歷實現小程序版本',
desc: '簡單日歷實現小程序版本',
path: '/pages/index/index'
};
},
//日歷方法 ，參數是只要穿入年和月就可以渲染出來當前年月的日歷，
//用let來代替var，let是es6的，也是用來聲明變量的，只是沒有變量提升，更加嚴謹
calendar: function (year, month) {
let fullDay = parseInt(new Date(year, month + 1, 0).getDate()),//當前月總天數
startWeek = parseInt(new Date(year, month, 1).getDay()), //當前月第一天周幾
lastMonthDay = parseInt(new Date(year, month, 0).getDate()), //上個月的天數
totalDay = (fullDay + startWeek) % 7 == 0 ? (fullDay + startWeek) : fullDay + startWeek + (7 - (fullDay + startWeek) % 7);//元素總個數
//年份范圍 我是取當前年的前后十年
let newYearList = [], newMonthList = [], curYear = new Date().getFullYear();
for (var i = curYear - 10; i < curYear + 10; i++) {
newYearList.push(i);
}
//月份范圍
for (var i = 1; i <= 12; i++) {
newMonthList.push(i);
}
let lastMonthDaysList = [], currentMonthDaysList = [], nextMonthDaysList = [];
// 遍歷日歷格子
for (let i = 0; i < totalDay; i++) {
if (i < startWeek) {
//當月第一天不是周日的情況下，前面有幾個格式是上月的，就渲染上月的天數
lastMonthDaysList.push(lastMonthDay - startWeek + 1 + i);
} else if (i < (startWeek + fullDay)) {
//當月天數
currentMonthDaysList.push(i + 1 - startWeek);
} else {
//當月最后一天不是周六的時候，剩下的各自就渲染下月的天數
nextMonthDaysList.push((i + 1 - (startWeek + fullDay)));
}
}
this.setData({
monthList: newMonthList,//月份
yearList: newYearList, //年份范圍
lastMonthDaysList, //上月總天數
currentMonthDaysList, //當前月總天數
nextMonthDaysList //下月總天數
});
//要注意獲取的年份是從0開始算起的，所以需要添加一來顯示，這是中國地區的習慣啦
var tmonth = month + 1;
//讓小程序的標題也跟著改變
wx.setNavigationBarTitle({ title: year + "年" + tmonth + "月" })
},
//選擇月
//當用picker選擇月份的時候，月份就要發生改變，然后把新的年月傳入calendar參數中，重新渲染日歷
chooseMonth: function (e) {
//獲取的月份和我們想要顯示的月份相差一，所以需要做判斷
var chose_month = parseInt(e.detail.value) + 1 == 13 ? 1 : parseInt(e.detail.value);
this.setData({
cur_month: chose_month,
});
//小程序修改data的數據是用setData()方法
this.calendar(this.data.cur_year, this.data.cur_month)
},
//選擇年
chooseYear: function (e) { //同選擇月份一樣
var idx = e.detail.value;
var y = this.data.yearList[idx];
console.log(idx)
this.setData({
itemIndex: idx,
cur_year: y,
});
this.calendar(y, this.data.cur_month);
},
//操作月 操作月的函數我寫成了一個，
//也可以分開來寫，所以大家可以精簡，我這是為了讓大家看清晰~
handleMonth: function (e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
const index = this.data.itemIndex;
if (handle === 'prev') {
let newMonth = cur_month - 1;
let newYear = cur_year;
let idx = index;
if (newMonth < 0) {
newYear = cur_year - 1;
idx = index - 1;
newMonth = 11;
}
this.calendar(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth,
itemIndex: idx
});
} else {
let newMonth = cur_month + 1;
let newYear = cur_year;
let idx = index;
if (newMonth > 11) {
newYear = cur_year + 1;
idx = index + 1;
newMonth = 0;
}
this.calendar(newYear, newMonth);
this.setData({
cur_year: newYear,
cur_month: newMonth,
itemIndex: idx
});
}
}
})
小程序，小程序日歷版
如果你還有什么不清楚的，歡迎討論交流，共同進步~
原創文章，并且，這個日歷在我做的項目已經上線了，如果認為對你有幫助，求贊求關注~~~謝謝
給個小程序包，有需要的可以來下載哦
歡迎訪問我的個人網站zhengyepan
