我要评论这个日历采用小程序组件化开发，有兴趣的同学可以引用本组件（怎么引用不多赘述，自行去微信小程序开发api了解）
wxml
<!--pages/components/calender.wxml-->
<view class='calender'>
<view class='operate'>
<text catchtap='reduce'>减少</text>
<text catchtap="add">增加</text>
</view>
<view class='year'>
<text>{{year}}年</text>
<text>{{currentmonth}}月</text>
</view>
<view class='week'>
<block wx:for="{{weekarr}}" wx:key="{{index}}">
<text>{{item}}</text>
</block>
</view>
<view class='date'>
<block wx:for="{{datearr}}" wx:key="{{index}}">
<text>{{item-(weeknum-1)<=0?"":item-(weeknum-1)>yearmonth[currentmonth-1]?"":item-(weeknum-1)}}</text>
</block>
</view>
</view>
js
// pages/components/calender.js
component({
data:{
weekarr:["日","一","二","三","四","五","六"],
yearmonth:[],
rownum:"",
datearr:[],
currentmonth:"",
year:"",
weeknum:""
},
created:function(){},
attached:function(){
let t = new date()
this.setdata({
currentmonth: t.getmonth() + 1,
year: t.getfullyear()
})
//判断闰年
let yeartype = (this.data.year % 4 == 0) && (this.data.year % 100 != 0 || this.data.year % 400 == 0)
if ( yeartype ){
this.setdata({
yearmonth: [31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}else{
this.setdata({
yearmonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
})
}
let currentmonthday = this.data.year + "-" + this.data.currentmonth +"-01"
let weekstr = ""
this.setdata({
weeknum: new date(currentmonthday).getday(),
rownum: math.ceil((this.data.yearmonth[this.data.currentmonth] + new date(currentmonthday).getday())/7)
})
for( let i=0 ; i<this.data.rownum ; i++ ){
for( let j = 0 ; j<7 ; j++ ){
this.data.datearr.push(i*7+j)
}
}
this.setdata({
datearr:this.data.datearr
})
},
methods:{
//获取下一个月份
add:function(){
this.triggerevent("addone")
this.setdata({
datearr: []
})
if (this.data.currentmonth==12 ){
this.setdata({
currentmonth: 1,
year:this.data.year+1
})
}else{
this.setdata({
currentmonth: this.data.currentmonth + 1
})
}
let currentmonthday = this.data.year + "-" + this.data.currentmonth + "-01"
let weekstr = ""
this.setdata({
weeknum: new date(currentmonthday).getday(),
rownum: math.ceil((this.data.yearmonth[this.data.currentmonth-1] + new date(currentmonthday).getday()) / 7)
})
for (let i = 0; i < this.data.rownum; i++) {
for (let j = 0; j < 7; j++) {
this.data.datearr.push(i * 7 + j)
}
}
this.setdata({
datearr: this.data.datearr
})
},
//获取上一个月份
reduce:function(){
this.triggerevent("reduceone")
this.setdata({
datearr:[]
})
if (this.data.currentmonth == 1) {
this.setdata({
currentmonth: 12,
year: this.data.year - 1
})
} else {
this.setdata({
currentmonth: this.data.currentmonth - 1
})
}
let currentmonthday = this.data.year + "-" + this.data.currentmonth + "-01"
let weekstr = ""
this.setdata({
weeknum: new date(currentmonthday).getday(),
rownum: math.ceil((this.data.yearmonth[this.data.currentmonth-1] + new date(currentmonthday).getday()) / 7)
})
for (let i = 0; i < this.data.rownum; i++) {
for (let j = 0; j < 7; j++) {
this.data.datearr.push(i * 7 + j)
}
}
this.setdata({
datearr: this.data.datearr
})
console.log(this.data.datearr)
}
}
})
wxss
/* pages/components/calender.wxss */
.operate{
width:100%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 32rpx;
color:#000;
padding-bottom: 40rpx;
}
.year{
padding:0 30%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size:32rpx;
color:#404040;
margin-bottom: 40rpx;
}
.calender{
display: flex;
flex-direction: column;
padding:0 4.5%;
width:91%;
border-top:1rpx solid #eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender .week{
display: flex;
flex-direction: row;
}
.calender .week text{
width:14%;
text-align: center;
font-size:26rpx;
}
.calender .date text{
width:14%;
display: inline-block;
text-align: center;
font-size:26rpx;
color:#000;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论