微信小程序?qū)崿F(xiàn)日歷打卡
更新時間:2022年08月29日 09:05:47 作者:PPAP__
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)日歷打卡,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)日歷打卡的具體代碼,供大家參考,具體內(nèi)容如下
樣式比較簡單,要改自己改
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; }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript中undefined的本質(zhì)解析
這篇文章主要介紹了javascript中undefined的本質(zhì)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07