需求基本上如下图:点击上月下月可以设置切换
页面目录结构
在这个页面中使用该组件
好了,开始上代码
// components/monthchoose/monthchoose.js
Component({
attached() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
const maxDate = new Date(this.properties.endDate);
console.log("maxDate", maxDate);
let maxYear=maxDate.getFullYear();
let maxMonth=maxDate.getMonth()+1;
let isNext = (maxYear > year) || (maxYear == year && maxMonth > month);
this.setData({
year: year,
month: month,
maxYear: maxYear,
maxMonth: maxMonth,
nextActive: isNext
});
},
/**
* 组件的属性列表
*/
properties: {
endDate:{
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null,
}
},
/**
* 组件的初始数据
*/
data: {
year: 1900,
month: 1,
maxYear: 1900,
maxMonth: 1,
preActive:false,
nextActive:false
},
/**
* 组件的方法列表
*/
methods: {
bindPreMonth:function(){
let { year, month} = this.data;
if(month==1){
month = 12;
year = year - 1;
}
else{
month = month -1;
}
const date = new Date();
let minYear = date.getFullYear();
let minMonth = date.getMonth() + 1;
let isPre = (year > minYear) || (year == minYear && month > minMonth);
this.setData({
year: year,
month: month,
nextActive: true,
preActive: isPre
});
this.triggerEvent("bindpreMonth", { year, month});
},
bindNexMonth:function(){
let { year, month, maxYear, maxMonth}=this.data;
if (month==12){
month=1;
year=year+1;
}
else{
month = month +1;
}
let isNext = (maxYear > year) || (maxYear == year && maxMonth > month);
this.setData({
year: year,
month: month,
nextActive: isNext,
preActive:true
});
this.triggerEvent("bindnextMonth", { year, month })
}
}
})
上月
{{year}}年{{month}}月
下月
.month-view{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx 30rpx;
font-size: 32rpx;
border-bottom: 1px solid #682E09;
}
.active{
color: #682E09;
}
.disable{
color: #e4e4e4;
}
// pages/schedule/schedule.js
Page({
/**
* 页面的初始数据
*/
data: {
endtime:'2019-07-20',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
_bindpreMonth(e) {
let {year,month}=e.detail;
},
_bindnextMonth(e) {
let { year, month } = e.detail;
},
})
当然不要忘了在schedul.json文件中加上引用组件的代码
{
"usingComponents": {
"monthchoose": "/components/monthchoose/monthchoose"
}
}
好了,搞定。不过写完我发现我需要一个前一天后一天这样的组件,再加工一下吧,先记录一下