在本文中,给出了一个例子来分享微信小程序的具体代码来实现日历效果。供您参考,详情如下。
效果预览:
部分wxml:
<view class='box1' style='width: {{ sysW * 7 }}px'>
<view class='dateBox'>{{ year }} - {{ month}}</view>
<block wx:for='{{ weekArr }}'>
<view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{ item }}</view>
</block>
<block wx:for='{{ arr }}'>
<view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class='{{ item == getDate ? "dateOn" : ""}}'>{{ item }}</view>
</block>
</view>
Wxss部分:
.box1 .dateBox{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
margin-top: 20px;
font-size: 40rpx;
}
.box1{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.box1>view{
height: 30px;
line-height: 30px;
text-align: center;
font-size: 34rpx;
}
.dateOn{
border-radius: 50%;
background-color: hotpink;
color: #fff;
}
JS部分:
// page/index/index.js
Page({
/**
* Initial data of pages
*/
data: {
arr: [],
sysW: null,
lastDay: null,
firstDay: null,
WeekArr: ['Day','One','Two','Three','Four','Five','Six'],
year: null
},
// Getting Calendar Related Parameters
dataTime: function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() ;
var months = date.getMonth() + 1;
// Get the current year
this.data.year = year;
// Get the current month
this.data.month = months;
// Get today's date
this.data.getDate = date.getDate();
// What's the last day?
var d = new Date(year, months, 0);
this.data.lastDay = d.getDate();
// What day is the first day of the week?
let firstDay = new Date(year, month, 1);
this.data.firstDay = firstDay.getDay();
},
onLoad: function (options) {
this.dataTime();
// All dates are traversed according to the last day of this month.
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.arr.push(i);
}
var res = wx.getSystemInfoSync();
this.setData({
SysW: res. windows Height / 12, /// more screen width changes automatically set width
marLet: this.data.firstDay,
arr: this.data.arr,
year: this.data.year,
getDate: this.data.getDate,
month: this.data.month
});
}
})
以上是本文的全部内容。我希望它对每个人的学习都有所帮助,我希望你能更多地支持
南京小程序开发。