微信小程序實現(xiàn)日歷打卡

更新時間：2022年08月29日 09:05:47 作者：PPAP__

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷打卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)日歷打卡的具體代碼，供大家參考，具體內容如下

樣式比較簡單，要改自己改

let currentMonthDays = new Date(year,month,0).getDate() 
//獲取當前月份的天數(shù)
let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); 
//本月第一天是從星期幾開始的

首先要清楚以上兩個方法的意思
下面直接上代碼，邏輯很簡單

wxml

<view class="context">
<view class="top">
? <image src="../../img/left.png" bindtap="bindPreMonth"></image>
? <view>{{year}}年{{month}}月</view>
? <image src="../../img/right.png" bindtap="bindNextMonth"></image>
</view>

<view ?class="middle">
? <view wx:for="{{data_arr}}" wx:key="index" class="middle_num">
? ? {{item}}
? </view>
</view>

<view class="calen">

? <view wx:for="{{startWeek}}" wx:key="index" class="calen_blank"></view>
? <view wx:for="{{currentMonthDays}}"?
? class='{{index+1 == today ? "active": "calen_num"}}'?
? ? wx:key="index">
? {{index+1}}
? </view>
??
</view>

</view>

.js

Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? data_arr:["日","一","二","三","四","五","六"],
? ? year:"",
? ? month:"",
? ? today:2 //這是固定2號這天打開，連續(xù)幾天打卡就用數(shù)組就好了
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? let now = new Date()
? ? let year = now.getFullYear()
? ? // month獲取是從 0~11
? ? let month = now.getMonth() + 1
? ? this.setData({
? ? ? year,month
? ? })
? ? this.showCalendar()
? },

? showCalendar(){
? ? let {year,month} = this.data
? ? //以下兩個month已經(jīng)+1
? ? let currentMonthDays = new Date(year,month,0).getDate() //獲取當前月份的天數(shù)
? ? let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是從星期幾開始的
? ? this.setData({
? ? ? currentMonthDays,startWeek
? ? })
? },

? //上個月按鈕
? bindPreMonth(){
? ? let {year,month} = this.data
? ? //判斷是否是1月
? ? if(month - 1 >= 1){
? ? ? month = month - 1?
? ? }else{
? ? ? month = 12
? ? ? year = year - 1
? ? }
? ? this.setData({
? ? ? month,year
? ? })
? ? this.showCalendar()
? },

? //下個月按鈕
? bindNextMonth(){
? ? let {year,month} = this.data
? ? //判斷是否是12月
? ? if(month + 1 <= 12){
? ? ? month = month + 1?
? ? }else{
? ? ? month = 1
? ? ? year = year + 1
? ? }
? ? this.setData({
? ? ? month,year
? ? })
? ? this.showCalendar()
? }
})

.css

.context{
? width: 96%;
? background-color: antiquewhite;
? margin: 0 auto;
? padding: 10rpx;
}
.top{
? height: 80rpx;
? display: flex;
? justify-content: space-around;
}
.top image{
? height: 30rpx;
? width: 30rpx;
}
.middle{
? display: flex;
}
.middle_num{
? width: 14%;
? display: flex;
? justify-content: center;
? align-items: center;
}
.calen{
? display: flex;
? height: 400rpx;
? flex-wrap: wrap; /* 必要的時候拆行或拆列。 */
}
.calen_blank{
? width: 14%;
? height: 20%;
? background-color: pink;
}
.calen_num{
? width: 14%;
? height: 20%;
? display: flex;
? justify-content: center;
? align-items: center;
}
.active{
? background-color: rgb(89, 111, 238);
? width: 14%;
? height: 20%;
? display: flex;
? justify-content: center;
? align-items: center;
? border-radius: 40rpx;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: