本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下
源码
项目需要一个日历功能，花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k，有问题欢迎指正
如图：
index.wxml
我要评论
<view class="page">
<view class="box">
<view class="box-flex">
<view class="flex-item">
<view class="item-content" bindtap="doday" data-key='left'>
<view class="glyphicon glyphicon-triangle-left"></view>
</view>
</view>
<view class="flex-item item-content-current-day">
<view class="item-content">{{currentdate}}</view>
</view>
<view class="flex-item">
<view class="item-content" bindtap="doday" data-key="right">
<view class="glyphicon glyphicon-triangle-right"></view>
</view>
</view>
</view>
<view class="box-flex">
<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>
<view class="flex-item">
<view class="item-content">六</view>
</view>
<view class="flex-item">
<view class="item-content">日</view>
</view>
</view>
<view class="box-flex">
<view class="flex-item" wx:for="{{currentdaylist}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
<view class="item-content" wx:if="{{currentday != vo}}">{{vo}}</view>
<view class="item-content bk-color-day" wx:else>{{vo}}</view>
</view>
</view>
</view>
</view>
index.wxss
@import '../../dist/css/icon.wxss';
page {
background-color: #2a8cef;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8a2be2));
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
font-size: 14px;
}
.box {
display: block;
margin: 10px;
}
.box-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex-flow: nowrap;
flex-grow: 1;
flex-shrink: 1;
width: 14.2%;
}
.item-content {
margin: 5px;
padding: 0 10px;
text-align: center;
background-color: #000;
height: 2rem;
line-height: 2rem;
color: #fff;
}
.bk-color-day {
background-color: #8a2be2;
}
.item-content-current-day {
flex-grow: 2;
}
index.js
var app = getapp();
page({
data: {
currentdate: "2017年05月03日",
daylist: '',
currentdaylist: '',
currentobj: '',
currentday: ''
},
onload: function (options) {
var currentobj = this.getcurrentdaystring()
this.setdata({
currentdate: currentobj.getfullyear() + '年' + (currentobj.getmonth() + 1) + '月' + currentobj.getdate() + '日',
currentday: currentobj.getdate(),
currentobj: currentobj
})
this.setschedule(currentobj)
},
doday: function (e) {
var that = this
var currentobj = that.data.currentobj
var y = currentobj.getfullyear();
var m = currentobj.getmonth() + 1;
var d = currentobj.getdate();
var str = ''
if (e.currenttarget.dataset.key == 'left') {
m -= 1
if (m <= 0) {
str = (y - 1) + '/' + 12 + '/' + d
} else {
str = y + '/' + m + '/' + d
}
} else {
m += 1
if (m <= 12) {
str = y + '/' + m + '/' + d
} else {
str = (y + 1) + '/' + 1 + '/' + d
}
}
currentobj = new date(str)
this.setdata({
currentdate: currentobj.getfullyear() + '年' + (currentobj.getmonth() + 1) + '月' + currentobj.getdate() + '日',
currentobj: currentobj
})
this.setschedule(currentobj);
},
getcurrentdaystring: function () {
var objdate = this.data.currentobj
if (objdate != '') {
return objdate
} else {
var c_obj = new date()
var a = c_obj.getfullyear() + '/' + (c_obj.getmonth() + 1) + '/' + c_obj.getdate()
return new date(a)
}
},
setschedule: function (currentobj) {
var that = this
var m = currentobj.getmonth() + 1
var y = currentobj.getfullyear()
var d = currentobj.getdate();
var daystring = y + '/' + m + '/' + currentobj.getdate()
var currentdaynum = new date(y, m, 0).getdate()
var currentdayweek = currentobj.getutcday() + 1
var result = currentdayweek - (d % 7 - 1);
var firstkey = result <= 0 ? 7 + result : result;
var currentdaylist = []
var f = 0
for (var i = 0; i < 42; i++) {
let data =[]
if (i < firstkey - 1) {
currentdaylist[i] = ''
} else {
if (f < currentdaynum) {
currentdaylist[i] = f + 1
f = currentdaylist[i]
} else if (f >= currentdaynum) {
currentdaylist[i] = ''
}
}
}
that.setdata({
currentdaylist: currentdaylist
})
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论