検索
ホームページWeChat アプレットミニプログラム開発カレンダーサインインアプレットの実装

カレンダーサインインアプレットの実装

Jan 26, 2021 am 09:36 AM
アプレットカレンダー

カレンダーサインインアプレットの実装

#まず、最終的なレンダリングを見てみましょう:

(学習ビデオ共有:

プログラミング入門)

カレンダーサインインアプレットの実装

実装アイデアを紹介しましょう:

まず第一に、取得したいのは各グリッド内のデータに他なりません。

最初に月を取得し、その月をクリックして別の月に切り替えます。境界線に達すると、前年/翌年に到達する可能性があります。

それでは、月次データを取得するにはどうすればよいでしょうか? 月の最初の日が 1 から始まり、その後 xx 日 (1 月 31 日など) が列挙されていることがわかります。

ただし、月は年の影響を受けるため、閏年であれば計算は完了します。

コードをアップロードします

今月の 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 = [&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;,&#39;七&#39;,&#39;八&#39;,&#39;九&#39;,&#39;十&#39;,&#39;十一&#39;,&#39;十二&#39;].map(e => e + &#39;月&#39;)

それなら、上の月と下の月です

  up(e){
    var data = e.currentTarget.dataset
    if(data.data == &#39;上&#39;){
      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 == &#39;下&#39;){
      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 ? &#39;checkin&#39; : &#39;&#39;,
        sign: day.date == [cat_date.y, cat_date.m, cat_date.d].join(&#39;/&#39;),
        maxToday: +(Date.UTC(day.date.split(&#39;/&#39;)[0], day.date.split(&#39;/&#39;)[1] - 1, +(day.date.split(&#39;/&#39;)[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 ? &#39;maxToday&#39; : &#39;&#39;}}" 
                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 ? &#39;select_date&#39; : &#39;&#39;}}" wx:if="{{toDay == day.date}}">今</text>
                        <text class="block  {{day.sign ? &#39;select_date&#39; : &#39;&#39;}}" 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 || &#39;&#39;).join(&#39;&#39;) !== &#39;&#39;

--終了--

関連する推奨事項:

小さなプログラム開発チュートリアル

以上がカレンダーサインインアプレットの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は掘金で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Safe Exam Browser

Safe Exam Browser

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

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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