溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何使用組件開發微信小程序日歷，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
摘要: 我們都知道由于微信小程序開發文檔和工具的限制，js文件不能直接操作wxml文件，開發者不能進行dom操作，所以在此創建組件必須先把組件結構定義好！也就是說必須在wxml文件中先定義好組件結構，然后再綁定數據，根據j ...
| 我們都知道由于微信小程序開發文檔和工具的限制，js文件不能直接操作wxml文件，開發者不能進行dom操作，所以在此創建組件必須先把組件結構定義好！也就是說必須在wxml文件中先定義好組件結構，然后再綁定數據，根據js文件中的數據進行動態渲染。 我們在開發日歷小程序時（本站也曾經介紹過兩篇小程序日歷的源碼demo，有興趣的朋友可以了解下： 一款非常NB的日歷轉換器（陽歷-農歷）的微信小程序源碼demo 和微信小程序：日歷demo下載）就會發現，這里的日歷由兩部分組成，一是上部紅色，而是下面主要日歷部分。上部直接綁定數據。 下部分實現方式： 第一行星期的顯示，此處為固定顯示，無需js操作。然后下面的日歷body部分，由于每周七天，綁定的數據可根據此生成，根據當前日期生成每行的數據。 日期生成： 取當前月第一天，得到星期，計算上月在第一行的日期，如下圖紅色框中的部分：  以當前日期為例，本月一號位周六，當前月份可顯示上個月6天；計算當前月(或指定月份)最后一天的星期天數，取得下個月可在本月顯示日期。最后合并本月日期，并按每行七日排列，即可生成當前月分的日歷數據。以下貼出代碼： 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> |
感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用組件開發微信小程序日歷”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
