這個(gè)日歷應(yīng)該是網(wǎng)頁(yè)中常見的小功能了，這個(gè)也是window下的時(shí)間顯示器，這篇文章，就來實(shí)現(xiàn)下這個(gè)效果的小程序版本，哈哈，求個(gè)贊~~~這個(gè)可以當(dāng)做小程序?qū)W習(xí)的一個(gè)很好的實(shí)例啦，底部有下載鏈接，有需要的可以下載查看源碼去我個(gè)人網(wǎng)站瀏覽效果更好一些哈傳送門zhengyepan.com

image
一、實(shí)現(xiàn)的思路

寫js的時(shí)候，最重要的就是思路了，先有思路在用思路去做細(xì)節(jié)實(shí)現(xiàn)。首先呢，我來說下我的思路，不同人寫同種效果可能有不同思路，不能說誰(shuí)的思路厲害，但是有句話說的好，不管黑貓白貓，能抓到老鼠的就是好貓，同樣道理。當(dāng)然了，嚴(yán)謹(jǐn)?shù)乃悸犯尤菀拙S護(hù)代碼啦

思路：

當(dāng)月有多少天

當(dāng)月第一天星期幾

日歷一行有七個(gè)格子，對(duì)應(yīng)周日到周六（周日算一周的開始），每月最多31天，最少28天，根據(jù)前兩個(gè)條件來決定要顯示多少行，如果當(dāng)月第一天不是周日的話，則第一排前面的格子有上月天數(shù)的填滿，如果當(dāng)月最后一天不是周六，則剩下的格子有下月天數(shù)補(bǔ)上。

4.我需要是我只要傳入一個(gè)年份月份參數(shù)給一個(gè)函數(shù)，它就會(huì)自動(dòng)渲染日歷格子 例如：calendar(year,month)

根據(jù)上面的思路我們來具體實(shí)現(xiàn)它。

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;