如何使用組件開發(fā)微信小程序日歷

發(fā)布時間：2021-01-26 11:49:06 來源：億速云閱讀：172 作者：小新欄目：移動開發(fā)

這篇文章主要介紹了如何使用組件開發(fā)微信小程序日歷，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

摘要: 我們都知道由于微信小程序開發(fā)文檔和工具的限制，js文件不能直接操作wxml文件，開發(fā)者不能進行dom操作，所以在此創(chuàng)建組件必須先把組件結(jié)構(gòu)定義好！也就是說必須在wxml文件中先定義好組件結(jié)構(gòu)，然后再綁定數(shù)據(jù)，根據(jù)j ...

我們都知道由于微信小程序開發(fā)文檔和工具的限制，js文件不能直接操作wxml文件，開發(fā)者不能進行dom操作，所以在此創(chuàng)建組件必須先把組件結(jié)構(gòu)定義好！也就是說必須在wxml文件中先定義好組件結(jié)構(gòu)，然后再綁定數(shù)據(jù)，根據(jù)js文件中的數(shù)據(jù)進行動態(tài)渲染。

我們在開發(fā)日歷小程序時（本站也曾經(jīng)介紹過兩篇小程序日歷的源碼demo，有興趣的朋友可以了解下：
一款非常NB的日歷轉(zhuǎn)換器（陽歷-農(nóng)歷）的微信小程序源碼demo 和微信小程序：日歷demo下載）就會發(fā)現(xiàn)，這里的日歷由兩部分組成，一是上部紅色，而是下面主要日歷部分。上部直接綁定數(shù)據(jù)。
下部分實現(xiàn)方式：
第一行星期的顯示，此處為固定顯示，無需js操作。然后下面的日歷body部分，由于每周七天，綁定的數(shù)據(jù)可根據(jù)此生成，根據(jù)當前日期生成每行的數(shù)據(jù)。
日期生成：
取當前月第一天，得到星期，計算上月在第一行的日期，如下圖紅色框中的部分：

如何使用組件開發(fā)微信小程序日歷

以當前日期為例，本月一號位周六，當前月份可顯示上個月6天；計算當前月(或指定月份)最后一天的星期天數(shù)，取得下個月可在本月顯示日期。最后合并本月日期，并按每行七日排列，即可生成當前月分的日歷數(shù)據(jù)。以下貼出代碼：
wxml代碼：

<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

js代碼：

<view class="calendar" bindtap="tap">
    <view class="calendar-panel">
        <view class="day">{{canlender.date}}日</view>
        <view class="month">{{canlender.month}}月</view>
    </view>
    <view class="calendar-header">
        <view>日</view>
        <view>一</view>
        <view>二</view>
        <view>三</view>
        <view>四</view>
        <view>五</view>
        <view>六</view>
    </view>
    <view class="calendar-body">
        <block wx:for="{{canlender.weeks}}" wx:for-item="weeks">
            <view class="calender-body-date-week">
                <block wx:for="{{weeks}}" wx:for-item="day">
                    <view class="date {{canlender.month == day.month? '' : 'placeholder'}} {{day.date==canlender.date?'date-current': ''}}">{{day.date}}</view>
                </block>
            </view>
        </block>
    </view>
</view>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用組件開發(fā)微信小程序日歷”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

如何使用組件開發(fā)微信小程序日歷

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽