プログラミング入門)
今月の 7*5 リストを取得します
let getMothList = (year, month) => { var star = new Date(Date.UTC(year, month - 1, 1)).getDay() let mn = getMothNum(year)[month - 1] var res = [] var row = [] new Array(35) .fill('') .map((_, i) => i - star + 1) .map(e => (e > 0 && e <= mn) ? ({ date: `${year}/${month}/${e}`, number: e }) : (null) ) .forEach((item, i) => { row.push(JSON.parse(JSON.stringify(item))) if((i + 1) % 7 == 0){ res.push(row) row = [] } }) return res }次に月を取得します
var getMaxY = y => Boolean( y % 4 ==0 && y % 100 != 0 || y % 400==0 ) var getAugNum = n => getMaxY(n) ? 29 : 28 // --获取年对应的月份 var getMothNum = y => ([ 31, getAugNum(y), 31, 30, 31, 30, 31,31, 30, 31, 30, 31 ])上記の JS はこれですべてです (まだ必要です)前月と翌月を切り替えるため) 笑) しかし、中国の月がありません。必要に応じて、これをもう一度一致させることができます
var mothZh = ['一','二','三','四','五','六','七','八','九','十','十一','十二'].map(e => e + '月')それなら、上の月と下の月です
up(e){ var data = e.currentTarget.dataset if(data.data == '上'){ if(this.data.dateM > 1){ var dateM = this.data.dateM var dateY = this.data.dateY this.setDate(dateY, dateM - 1) }else{ var dateY = this.data.dateY this.setDate(dateY - 1, 12) } } }, down(e){ var data = e.currentTarget.dataset if(data.data == '下'){ if(this.data.dateM < 12){ var dateM = this.data.dateM var dateY = this.data.dateY this.setDate(dateY, dateM + 1) }else{ var dateY = this.data.dateY this.setDate(dateY + 1, 1) } } },上下の月の操作が完了したら更新します。 データを更新するとき、アプレットはビューにロジックを書くことができないため、mpa で操作します (これは私のビジネス ロジックです。心配する必要はありません)誰もが見ることができるように公開しました)
setDate(dateY, dateM){ var date_list = getMothList(dateY, dateM) .map(e => !e ? e : e.map(day => { var cat_date = this.data.cat_date return !day ? day : { ...day, className: this.data.chckin_list.indexOf(day.date) != -1 ? 'checkin' : '', sign: day.date == [cat_date.y, cat_date.m, cat_date.d].join('/'), maxToday: +(Date.UTC(day.date.split('/')[0], day.date.split('/')[1] - 1, +(day.date.split('/')[2]))) > Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), } })) this.setData(({ dateY, dateM, date_list, })) // 获取月和修改的时候,获取签到列表 this.setSign(dateY, dateM) // console.log(date_list) },そして、ここに chckin_list があることに気づくでしょう。これがレンダリングされるものです。 view
<view class="week"> <view class="flex" wx:for="{{date_list}}" wx:key="index" wx:for-item="row"> <view class="day {{day.maxToday ? 'maxToday' : ''}}" wx:for="{{row}}" wx:for-index="row_idx" wx:for-item="day" wx:key="row_idx" bind:tap="tapDay" data-day="{{day.date}}" > <block wx:if="{{day}}"> <text class="block to_day_block {{day.sign ? 'select_date' : ''}}" wx:if="{{toDay == day.date}}">今</text> <text class="block {{day.sign ? 'select_date' : ''}}" wx:else>{{day.number}}</text> </block> <view wx:if="{{day.className}}" class="{{day.className}}">已签</view> </view> </view> </view>上記は私のビジネス ロジックです。実際には、空のものを除いて、その他すべてをレンダリングする必要があるため、必要なのは if と day だけです。しかし、一般的なビジネスでは、チェックインするかどうかも尋ねられます。 今日以降、グレーでクリック不可になります (CSS でクリックが無効になっているため、ここではクリック不可はありません) その他チェックインしなかった理由CSS を入れないということは、みんなの CSS はまだ私のものであるということです。それを書くだけで、本当に必要な場合は、下にコメントを残してください。 ああ、効果を確認したい場合は、ミニ プログラムにアクセスして「旧正月 9 日に単語を覚える」を検索し、カレンダーをクリックしてください (1 つは今日の単語を完了するためのホームページです) (必要に応じて、サインイン バックエンド、nodejs の方法を教えます) --わかりました- -以上です、おやすみなさい- --更新部分--- (階下の誰かが私 (マオマオファン) に、3 月最後の 31 日がないことを思い出させてくれました。確認したところ、5 * 7 が機能しないため、カットされていることがわかりました。完全に表示されます) 修正後の写真
変更された部分はダイナミックです積み込みライン。
#まず先ほどの35を6*7に変更します。もう一行追加されたからです。次に、空き領域があるかどうかを確認し、削除します。
row.map(e => e || '').join('') !== ''--終了--関連する推奨事項:
小さなプログラム開発チュートリアル
以上がカレンダーサインインアプレットの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事は掘金で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事
アサシンのクリードシャドウズ:シーシェルリドルソリューション
1 か月前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
1 か月前ByDDD
Inzoi:学校と大学への応募方法
3週間前ByDDD

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

WebStorm Mac版
便利なJavaScript開発ツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ホットトピック
Gmailメールのログイン入り口はどこですか?
7759
15


Java チュートリアル
1644
14


CakePHP チュートリアル
1399
52


Laravel チュートリアル
1293
25


PHP チュートリアル
1234
29

