当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 如何开发微信小程序日历组件开发

如何开发微信小程序日历组件开发

2018-06-04 15:48 来源: 霸界科技

摘要:一款非常NB的日历转换器(阳历-农历)的微信小程序源码demo 和微信小程序:日历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>
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088