微信小程序日历效果
作者：袖梨
2022-06-25
本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下
源码
项目需要一个日历功能，花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k，有问题欢迎指正
如图：
index.wxml
{{currentDate}} 一 二 三 四 五 六 日 {{vo}} {{vo}}
index.wxss
css;">@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 = currentDayNum) {
currentDayList[i] = ''
}
}
}
that.setData({
currentDayList: currentDayList
})
}
})
