溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序日歷組件開發(fā)的示例

發(fā)布時(shí)間：2021-01-29 14:20:25 來源：億速云 閱讀：260 作者：小新 欄目：移動(dòng)開發(fā)

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

我們都知道由于微信小程序開發(fā)文檔和工具的限制，js文件不能直接操作wxml文件，開發(fā)者不能進(jìn)行dom操作，所以在此創(chuàng)建組件必須先把組件結(jié)構(gòu)定義好！也就是說必須在wxml文件中先定義好組件結(jié)構(gòu)，然后再綁定數(shù)據(jù)，根據(jù)js文件中的數(shù)據(jù)進(jìn)行動(dòng)態(tài)渲染。
我們在開發(fā)日歷小程序時(shí)（本站也曾經(jīng)介紹過兩篇小程序日歷的源碼demo，有興趣的朋友可以了解下：
一款非常NB的日歷轉(zhuǎn)換器（陽歷-農(nóng)歷）的微信小程序源碼demo 和微信小程序：日歷demo下載）就會(huì)發(fā)現(xiàn)，這里的日歷由兩部分組成，一是上部紅色，而是下面主要日歷部分。上部直接綁定數(shù)據(jù)。
下部分實(shí)現(xiàn)方式：
第一行星期的顯示，此處為固定顯示，無需js操作。然后下面的日歷body部分，由于每周七天，綁定的數(shù)據(jù)可根據(jù)此生成，根據(jù)當(dāng)前日期生成每行的數(shù)據(jù)。
日期生成：
取當(dāng)前月第一天，得到星期，計(jì)算上月在第一行的日期，如下圖紅色框中的部分：

微信小程序日歷組件開發(fā)的示例
以當(dāng)前日期為例，本月一號位周六，當(dāng)前月份可顯示上個(gè)月6天；計(jì)算當(dāng)前月(或指定月份)最后一天的星期天數(shù)，取得下個(gè)月可在本月顯示日期。最后合并本月日期，并按每行七日排列，即可生成當(dāng)前月分的日歷數(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>

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手