微信小程序日历效果
本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下
源码下载地址
项目需要一个日历功能，花了一天时间实现的微信小程序日历，js大小只有几k，引入了引导程序字体图标（文件icon.wxss，该字体已经引导程序字体图标需要的字体)看起来有80k，出去icon.wxss整个只有几k，有问题欢迎指正
如图：
index.wxml
view class=' page ' view class=' box ' view class=' box-flex ' view class=' flex-item ' view class=' item-content ' bind tap=' DoDay ' data-key=' left ' view class=' glyphicon glyphicon-left '/view/view/view class=' flex-item-content-current-day ' view class=' item-content ' { current date } }/view/view class=' flex-item ' view class=' item-content ' bind tap=' DoDay '一/view/view view class=' flex-item ' view class=' item-content '二/view/view view class=' flex-item ' view class=' item-content '三/view/view view class=' flex-item ' view class=' item-content '四/view/view view class=' flex-item ' view class=' item-content '五/view/view view class=' flex-item ' view class=' item-content '六/view/view视图类=flex-item ' view class=' item-content '日/view/view/view class=' box-flex ' view class=' flex-item ' wx : for=' { { current day list } } ' wx : for-index=' key ' wx : for-item=' VO ' wx : key=' { { key } } ' view class=' item-content ' wx : if=' { { current day！=VO } } ' { { VO } }/view view class=' item-content bk-color-day ' wx : else { { VO } }/view/view/view/view index。页面样式表
@导入././dist/CSS/图标。wxss '；第{底色： # 2a 8 cef背景：-网络套件-渐变(线性，0 0,0底，从(#2a8cef)到(# 8a2be 2))；显示： flex flex-方向：柱；宽度： 100%;高度： 100%;flex-wrap : nowrap；正义-内容： flex-start；align-items:拉伸；font-size : 14px} .框{ display:块；margin: 10px}。box-flex { display :-web套件-box；display :-web套件-flex；显示： flex柔性包装：包装；} .flex-item { flex-flow : nowrap；flex-grow : 1；flex-shrink : 1；宽度： 14.2%;} .项目内容{ margin : 5 xpadding : 0 10px文本对齐：中心；背景色： # 000;高度： 2毫米线高： 2雷姆；color: # fff}。bk-color-day {底色： # 8a 2be 2；} .项目-内容-当前日期{ flex-grow : 2；}index.js
var app=get PP()；页面({ data : { current date : ' 2017-什么05-你好03什么事、daylist : ' '、currentdaylist : ' '、currentobj : ' '、currentday : ' ' }、onload 3330函数(选项){ var current obj=this。getcurrenttdetaring()此。setdata({当前日期3330当前对象。getfull year())-什么(CurrentBoj . GetMountain)(1)'-你好currentObj.getDate()'什么事当前日期3330当前目标。getdate()、current obj 3330 current obj })这。setschedulee(current obj)}、doday 3330函数(e){ var那=这个var current obj=那个。数据。当前对象变量y=当前对象。get full year()；var m=current tobj . getmonth()1:var d=current obj。getdate()；var str=' ' if(即当前目标。数据集。key==left){ m-=1if(m=0){ str=(y-1)'/' 12 '/' d } else { str=y '/' m '/' d } } else { m=1if(m=12){ str=y '/' m '/' d } else { str=(y-1)'/' 1 '/' d } } current obj=new date(str)this。setdata({ {当前日期：当前obj。一整年-什么(CurrentBoj . GetMountain)(1)'-你好currentObj.getDate()'什么事current obj 3330 current obj’)这。setschedulee(当前obj)；}，getcurrentdetailing 3330 function(){ var obj date=this。数据。当前obj if(objdate！='){ return obj date } else { var c _ obj=new date()var a=c _ obj。getfullyear()'/'(c _ obj。get onth()1)'/' c _ obj。getdate()返回新日期(a)}，setschette 3330函数(当前obj){ var那=这个var m=当前obj。get fonth()1var y=current obj。获取整年()var d=当前obj。getdate()；var day string=y '/m '/current obj。get date()var current daynum=new date(y，m，0).get data()var current day week=current obj。getutcday()1 var结果=当前星期几-(d % 7-1)；var firstKey=结果=0？七结果：结果；var当日列表=[]var f=0为(var I=0)；i12(I){ let data=[]if(I first key-1){当前日期列表[I]=else { if(f当前日期列表[I]=f1 f=当前日期列表[I])} else if(f=当前日期num){当前日期列表[I]=' } }那。设置数据({当日列表3330当日列表} })朱塞佩朱塞佩朱塞佩朱塞佩，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲吴亚玲吴亚玲。
