小程序模板網(wǎng)

JavaScript簡(jiǎn)單日歷實(shí)現(xiàn)-小程序版

發(fā)布時(shí)間:2018-04-25 11:14 所屬欄目:小程序開(kāi)發(fā)教程

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

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

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

思路:

當(dāng)月有多少天

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

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

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

根據(jù)上面的思路我們來(lái)具體實(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;


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24079.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢