這篇文章主要介紹了微信小程序日歷組件開發(fā)的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
網(wǎng)站建設(shè)哪家好，找
創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、
重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了
通道免費(fèi)建站歡迎大家使用！
我們都知道由于微信小程序開發(fā)文檔和工具的限制，js文件不能直接操作wxml文件，開發(fā)者不能進(jìn)行dom操作，所以在此創(chuàng)建組件必須先把組件結(jié)構(gòu)定義好！也就是說必須在wxml文件中先定義好組件結(jié)構(gòu)，然后再綁定數(shù)據(jù)，根據(jù)js文件中的數(shù)據(jù)進(jìn)行動態(tài)渲染。
我們在開發(fā)日歷小程序時（本站也曾經(jīng)介紹過兩篇小程序日歷的源碼demo，有興趣的朋友可以了解下：
一款非常NB的日歷轉(zhuǎn)換器（陽歷-農(nóng)歷）的微信小程序源碼demo 和微信小程序：日歷demo下載）就會發(fā)現(xiàn)，這里的日歷由兩部分組成，一是上部紅色，而是下面主要日歷部分。上部直接綁定數(shù)據(jù)。
下部分實(shí)現(xiàn)方式：
第一行星期的顯示，此處為固定顯示，無需js操作。然后下面的日歷body部分，由于每周七天，綁定的數(shù)據(jù)可根據(jù)此生成，根據(jù)當(dāng)前日期生成每行的數(shù)據(jù)。
日期生成：
取當(dāng)前月第一天，得到星期，計算上月在第一行的日期，如下圖紅色框中的部分：
以當(dāng)前日期為例，本月一號位周六，當(dāng)前月份可顯示上個月6天；計算當(dāng)前月(或指定月份)最后一天的星期天數(shù)，取得下個月可在本月顯示日期。最后合并本月日期，并按每行七日排列，即可生成當(dāng)前月分的日歷數(shù)據(jù)。以下貼出代碼：
wxml代碼：
{{canlender.date}}日
{{canlender.month}}月
日
一
二
三
四
五
六
{{day.date}}
js代碼：
{{canlender.date}}日
{{canlender.month}}月
日
一
二
三
四
五
六
{{day.date}}
|
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序日歷組件開發(fā)的示例”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前名稱：微信小程序日歷組件開發(fā)的示例-創(chuàng)新互聯(lián)
當(dāng)前鏈接：
http://weahome.cn/article/dehddj.html
重慶分公司
重慶分公司
