微信小程序实现简单日历效果
作者:别凶小晗.
这篇文章主要为大家详细介绍了微信小程序实现简单日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下
效果:
wxml:
<!-- 日历 --> <view class="myReport-calendar"> <view class="img"> <image mode="aspectFit" src="/imgs/calendar.png"></image> </view> <view class="calendar"> <view class="selectDate"> <view class="date-wrap"> {{year}}年{{month}}月 </view> </view> <view class="week"> <block wx:for="{{weekArr}}" wx:for-index="index" wx:for-item="item" wx:key="key"> <view>{{item}}</view> </block> </view> <view class="date-box"> <block wx:for='{{dateArr}}' wx:key='key'> <view class='{{theDay == item.isToday ? "nowDay" : ""}}' data-key='{{item.isToday}}'> <view class='date-head' data-year='{{year}}' data-month='{{month}}' data-datenum='{{item.dateNum}}'> <view>{{item.dateNum}}</view> </view> </view> </block> </view> </view> </view>
js:
// pages/report/report.js Page({ /** * 页面的初始数据 */ data: { year: 0, month: 0, weekArr: ['日', '一', '二', '三', '四', '五', '六'], dateArr: [], isToday: "", isTodayWeek: false, todayIndex: 0, theDay: "", index: '', signNum: '', //签到数 }, dateInit: function (setYear, setMonth) { //全部时间的月份都是按0~11基准,显示月份才+1 let dateArr1 = []; //需要遍历的日历数组数据 let arrLen = 0; //dateArr的数组长度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数 let nextMonth = (month + 1) > 11 ? 1 : (month + 1); let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期 let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天 let obj = {}; let num = 0; if (month + 1 > 11) { nextYear = year + 1; dayNums = new Date(nextYear, nextMonth, 0).getDate(); } arrLen = startWeek + dayNums; for (let i = 0; i < arrLen; i++) { if (i >= startWeek) { num = i - startWeek + 1; obj = { isToday: '' + year + (month + 1) + num, dateNum: num, weight: 5 } } else { obj = {}; } dateArr1[i] = obj; } this.setData({ dateArr: dateArr1 }) let nowDate = new Date(); let nowYear = nowDate.getFullYear(); let nowMonth = nowDate.getMonth() + 1; let nowWeek = nowDate.getDay(); let getYear = setYear || nowYear; let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth; if (nowYear == getYear && nowMonth == getMonth) { this.setData({ isTodayWeek: true, todayIndex: nowWeek }) } else { this.setData({ isTodayWeek: false, todayIndex: -1 }) } }, /** * 生命周期函数--监听页面显示 */ onShow: function () { let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; this.dateInit(); this.setData({ year: year, month: month, isToday: '' + year + month + now.getDate(), theDay: '' + year + month + now.getDate() }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
wxss:
/* 日历 */ .myReport-calendar { width: 100%; height: 700rpx; margin-top: 27rpx; margin-bottom: 40rpx; position: relative; } .calendar { position: absolute; top: 88rpx; left: 0; right: 0; bottom: 0; margin: 0 auto; } .today .day { width: 100%; height: 100%; margin: 0 auto; text-align: center; } .today text { display: block; width: 60rpx; text-align: center; line-height: 60rpx; color: #fff; background: #00c8be; border-radius: 100rpx; } .selectDate { padding-bottom: 20rpx; text-align: center; } .date-wrap { font-size: 32rpx; font-weight: 600; color: #232323; } .week { display: flex; align-items: center; justify-content: space-around; padding: 30rpx; color: #000000; font-weight: 400; font-size: 28rpx; } .date-box { font-size: 0; padding: 0 30rpx 30rpx 30rpx; margin: 0 auto; } .date-box>view { position: relative; display: inline-block; width: 14.285%; color: #333; text-align: center; vertical-align: middle; padding-bottom: 30rpx; } .date-head { height: 60rpx; line-height: 60rpx; font-size: 28rpx; } .nowDay .date-head { width: 60rpx; border-radius: 50%; text-align: center; color: #fff; background-color: #00c8be; margin: 0 auto; } .nowDay .date-head:hover { background: linear-gradient(to bottom right, #009899, #19d6cb); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。