手把手教你写一个微信小程序日历组件 |
您所在的位置：网站首页 › 手写日历内容 › 手把手教你写一个微信小程序日历组件 |
手把手教你写一个微信小程序日历组件
|
今天我们一起写一个微信小程序日历组件 微信小程序日历组件 github.com/humanlegacy… 好，我们先看一下要实现的模样，如下图
1.日历可以通过按钮【切换展示效果】改变日历的呈现效果，上图是平铺模式，下图是收起滚动模式。 2.通过点击具体的日期可以在页面上显示当前选中的具体日期。 3.点击【今天】快速回到当日视图。 4.点击【◀】和【▶】切换月份。 上面的四点也是基本的交互需求，我们马上开始。 首先，我们先结构后样式，做出最基本的界面结构 这边我们把整体结构分成上中下，操作显示区，星期显示区，日期显示区。 {{lastMonth}} {{title}} {{nextMonth}} 今天 {{item}} {{item}} {{item.date}} {{item}}这是我们基本的日历结构，机智的小伙伴已经从布局中知道我们实现的大致逻辑了，是的，我们先获取当月有多少天，上月和下月有多少天，这样我们的日历就出来了。好，慢慢来，下面我们详细说，我们先写上基本的样式。 .calendar { width: 100%; text-align: center; font-size: 30rpx; box-sizing: border-box; } /* 标题 */ .calendar-title { line-height: 70rpx; font-size: 30rpx; text-align: left; padding: 0 20rpx; box-sizing: border-box; } .calendar-title .ctrl { display: inline-block; padding: 0 20rpx; background: #f5f5f5; border-radius: 10rpx; } .calendar-title .item { display: inline-block; vertical-align: middle; line-height: 50rpx; } .calendar-title .title { min-width: 300rpx; text-align: center; } .calendar-title .today { float: right; margin-top: 10rpx; } /* 星期 */ .calendar-week { display: flex; text-align: center; padding: 20rpx 10rpx; box-sizing: border-box; border-top: 1rpx solid #e0e0e0; border-bottom: 1rpx solid #e0e0e0; background: #f5f5f5; } .calendar-week .item { flex: 1; } /* 日期 */ .calendar-container { display: flex; flex-wrap: wrap; padding: 20rpx 10rpx; box-sizing: border-box; } .calendar-container .grid { display: inline-block; width: 14.28571428571429%; line-height: 70rpx; position: relative; z-index: 1; } .calendar-container .grid.gray { color: #ccc; } .calendar-container .grid .wrap.select { background: rgb(49, 120, 228); border-radius: 10rpx; color: #fff; width: 80%; margin: 0 auto; }以上我们基本试下了日历的界面，下面我们来实现星期和日期的展示。 好，我们先显示星期，我们先在组件中定义一个数组，用来遍历显示星期的标题； Component({ properties: { //星期数组 weekText: { type: Array, value: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] } }, ... })我们将星期的标题定义为可配置的模式，默认显示如上的文字，之后我们可以在组件外自定义，个性化显示。于是我们调整下wxml的代码。 {{item}}这样我们就能看到我们想要的效果。
new Date(year, month, date).getDate(); 由此我们做如下尝试
由于JavaScript中day的范围为1~31中的值，所以当设为0时，会向前 一天，也即表示上个月的最后一天，通过这种方式可以得到每个月份的天数。 知道了获取当月天数的原理，我们还需要知道当月1号是星期几。 我们使用如下的方法： new Date(Date.UTC(year, month-1, date)).getDay();
相关的事件监听： //默认选中当天 并初始化组件 today: function () { let DATE = this.data.defaultValue ? new Date(this.data.defaultValue) : new Date(), year = DATE.getFullYear(), month = DATE.getMonth() + 1, date = DATE.getDate(), select = year + '-' + this.zero(month) + '-' + this.zero(date); this.setData({ format: select, select: select, year: year, month: month, date: date, YEAR: year, MONTH: month, DATE: date, }) //初始化日历组件UI this.display(year, month, date); //发送事件监听 this.triggerEvent('select', select); }, //上个月 lastMonth: function () { let month = this.data.month == 1 ? 12 : this.data.month - 1; let year = this.data.month == 1 ? this.data.year - 1 : this.data.year; //初始化日历组件UI this.display(year, month, 0); }, //下个月 nextMonth: function () { let month = this.data.month == 12 ? 1 : this.data.month + 1; let year = this.data.month == 12 ? this.data.year + 1 : this.data.year; //初始化日历组件UI this.display(year, month, 0); },代码中我们使用this.display(year, month, 0)为组件统一初始化； 同时在today函数中我们添加事件监听函数，将选中的日期发送到页面，我们通过事件订阅来获取的相关值。 //组件监听事件 select(e) { this.setData({ selectVal:e.detail }) },最后我们为切换显示效果的按钮添加事件： toggleType(){ this.selectComponent('#Calendar').toggleType(); }组件中对应的方法，每当切换展示效果，组件都需要初始化 //切换展示 toggleType(){ this.setData({ toggleType: this.data.toggleType == 'mini' ? 'large' :'mini' }) //初始化日历组件UI this.display(this.data.year, this.data.month, this.data.date); },以上基本上是小程序日历组件实现的基本逻辑，介于篇幅太长还有很多实现上的细节不在此一一细说，大家可以移步我的github 微信小程序日历组件 github.com/humanlegacy… 上文中有不足之处，请给出建议或更优的实现方案，谢谢~ 最后祝大家五一快乐~~ |
【本文地址】