微信小程序自定义组件 |
您所在的位置：网站首页 › 微信小程序日历插件怎么用 › 微信小程序自定义组件 |
微信小程序自定义组件
|
最近需求要求实现一个用日历显示用户打卡记录的功能，百度google了微信小程序的组件，都没有找到合适的，索性就懒得找了，自己动手，丰衣足食。 下面先来看看日历组件的效果吧：
1、能够折叠日历组件 2、能够标记日期 3、能够根据左右滑动切换月份，并且刷新数据。 设计思路： 1、折叠可以通过添加移除class实现动画折叠。 2、每个日期都是一个格子，可以放时间，也可以放图标，只需要根据wx:if来控制是否显示图标和样式。 3、使用微信的原生组件swiper来实现左右滑动的效果，监听swiper切换并刷新数据。 组件代码如下： index.js Component({ properties: { clockDatas: { type: Array } }, data: { showMore: false, weekData: ['日', '一', '二', '三', '四', '五', '六'], miniContent: [ ///monthStatus:0-上月日期，1-本月日期，2-下月日期，isSignIn是否已签到，isToday当前日期是否是今天 { id: 1, title: "26", monthStatus: 1, isSignIn: false, isToday: false } ], largeContent: [], today: "", currentYear: "", currentMonth: "", currentDate: "", lastSwiper: 0 }, observers: { 'clockDatas': function(data){ console.log("数据更新"); let changeDate = this.data.currentYear + "-" + this.data.currentMonth + "-1"; this.getLargeDate(changeDate); } }, ready: function () { this.initCalendar(); }, methods: { contentToggle(){ this.setData({ showMore: !this.data.showMore }) }, //初始化日历 initCalendar(){ let dateObject = new Date(), year = dateObject.getFullYear(), month = dateObject.getMonth() + 1, date = dateObject.getDate(), today = year + '-' + this.zero(month) + '-' + this.zero(date); this.setData({ today: today, currentYear: year, currentMonth: month, currentDate: date }); this.getMiniDate(); this.getLargeDate(); }, // 获取小日期 getMiniDate(){ let dateObject = new Date(); let toMonth = dateObject.getMonth() + 1; let toDay = dateObject.getDate(); let toWeek = dateObject.getDay(); dateObject.setDate(dateObject.getDate() - toWeek); let miniData = []; for(let i=0;i item.date==currentDate.date); let currentObj = { title: currentDate.day, monthStatus: (currentDate.month > toMonth ? 2 : (currentDate.month < toMonth ? 0 : 1)), isSignIn: clockDate.length>0?true:false, isToday: (currentDate.day==toDay ? true : false) } miniData.push(currentObj); dateObject.setDate(dateObject.getDate()+1); } //console.log("小日期", miniData); this.setData({ miniContent: miniData }); }, // 获取大的日期 getLargeDate(dates){ let dateObject = dates ? new Date(dates) : new Date(); let toMonth = dateObject.getMonth() + 1; let toDay = dateObject.getDate(); let toWeek = new Date(dateObject.getFullYear(), toMonth - 1, 1).getDay(); // 获取本月一号的星期 let toDates = 42; dateObject.setDate(dateObject.getDate() - (toWeek + toDay - 1)); let largeData = []; for (let i = 0; i < toDates; i++) { let currentDate = this.getFormatDate(dateObject); let clockDate = this.data.clockDatas.filter((item) => item.date==currentDate.date); let currentObj = { title: currentDate.day, monthStatus: (currentDate.month > toMonth ? 2 : (currentDate.month < toMonth ? 0 : 1)), isSignIn: clockDate.length>0?true:false, isToday: (currentDate.date == this.data.today ? true : false) } largeData.push(currentObj); dateObject.setDate(dateObject.getDate() + 1); } //console.log("大日期", largeData); this.setData({ largeContent: largeData }); }, getFormatDate(date){ let year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(); let currentDate = year + "-" + this.zero(month) + "-" + this.zero(day); return { year: year, month: month, day: day, date: currentDate } }, // 滑块改变事件 swiperChange(e){ let current = e.detail.current; let lastSwiper = this.data.lastSwiper; let status = current - lastSwiper; if(status == -1 || status == 2){ //console.log("右滑"); this.setCurrentDate(0); //月份减一 }else if(status == 1 || status == -2){ //console.log("左滑"); this.setCurrentDate(1); //月份加一 }else{ console.log("其他"); } let changeDate = this.data.currentYear + "-" + this.data.currentMonth + "-1"; //this.getLargeDate(changeDate); this.triggerEvent('changeMonth',{year: this.data.currentYear, month: this.data.currentMonth}); this.setData({ lastSwiper: current }) }, // 根据传入的参数加减月份 setCurrentDate(type){ let currentYear = Number(this.data.currentYear); let currentMonth = Number(this.data.currentMonth); if(type){ if(currentMonth==12){ currentYear = currentYear + 1; currentMonth = 1; }else{ currentMonth = currentMonth + 1; } }else{ if(currentMonth == 1){ currentYear = currentYear - 1; currentMonth = 12; }else{ currentMonth = currentMonth - 1; } } this.setData({ currentYear: currentYear, currentMonth: currentMonth }) }, //补全0 zero: function (i) { return i >= 10 ? i : '0' + i; }, } })index.wxml |
【本文地址】
今日新闻 |
推荐新闻 |