微信小程序日历效果

本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下源码下

本文实例为大家分享了微信小程序日历效果的具体代码，供大家参考，具体内容如下

源码下载地址

项目需要一个日历功能，花了一天时间实现的微信小程序日历,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
 })
 }
}) 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。