网站选择理由描述,六安手机网站建设,扁平化设计 科技感网站素材,网站速度慢wordpress微信小程序–创建一个日历组件
可以创建一个日历组件#xff0c;来展示当前月份的日期#xff0c;并支持切换月份的功能。
一、目录结构
/pages/calendarcalendar.wxmlcalendar.scsscalendar.jscalendar.json二、calendar.wxml view classcalendar来展示当前月份的日期并支持切换月份的功能。
一、目录结构
/pages/calendarcalendar.wxmlcalendar.scsscalendar.jscalendar.json
二、calendar.wxml view classcalendarview classheaderview bindtapchangeMonth data-directionprevvan-icon namearrow-left //viewtext{{year}}年{{month}}月/textvan-icon namearrow bindtapchangeMonth data-directionnext //viewview classdaysview classweektext日/texttext一/texttext二/texttext三/texttext四/texttext五/texttext六/text/viewview classdatesblock wx:for{{days}} wx:keyindexview classdate{{item}}/view/block/view/view/view三、calendar.scss
.calendar {width: 100%;border-radius: 15rpx;background-color: #fff;padding: 20rpx;
}.header {width: 100%;display: flex;justify-content: space-between;align-items: center;font-size:32rpx;
}.days {margin-top: 20px;
}.week {display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px;text-align: center;margin-bottom: 20px;
}.dates {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px 5px;
}.date {width: 100%;height: 60px;text-align: center;padding: 10px;background-color: #f0f0f0;color: #000;
}四、calendar.js
Page({data: {year: new Date().getFullYear(),month: new Date().getMonth() 1,days: [],},onLoad() {this.loadCalendar();},loadCalendar() {const { year, month } this.data;// 获取当月的第一天是星期几const firstDay new Date(year, month - 1, 1).getDay();// 获取当月的天数const totalDays new Date(year, month, 0).getDate();// 创建日期数组const days [];// 填充空白日期for (let i 0; i firstDay; i) {days.push();}// 填充实际日期for (let i 1; i totalDays; i) {days.push(i);}this.setData({ days });},changeMonth(event) {const direction event.currentTarget.dataset.direction;let { year, month } this.data;if (direction prev) {month--;if (month 1) {month 12;year--;}} else if (direction next) {month;if (month 12) {month 1;year;}}this.setData({ year, month }, () {this.loadCalendar();});}
});五、效果图样式可以按需更改 六、padStart
padStart(2, 0) 是 JavaScript 字符串的方法用于填充字符串的开头直到指定的长度。
使用了 padStart(2, 0) 来确保日期和月份都是两位数格式。
str.padStart(targetLength, padString);targetLength 是目标字符串的最终长度。padString 是用于填充的字符串如果字符串长度不够使用这个字符串填充直到目标长度为止。
在 padStart(2, 0) 中意思是如果原字符串的长度小于 2则用 0 在字符串的开头进行填充直到字符串的长度为 2。
案列
5.padStart(2, 0); // 05
12.padStart(2, 0); // 12
123.padStart(5, 0); // 00123七、实现高亮当前日期给日期添加点击事件并高亮显示
calendar.wxml view classdatesblock wx:for{{days}} wx:keyindexview classdate {{item.isToday ? highlight-today : }} {{isChooseDateitem.day ? choose-day : }} bindtapshowEventDetail data-day{{item}}{{item.day}}/view/block/viewcalendar.js loadCalendar() {const {year,month} this.data;// 获取当月的第一天是星期几const firstDay new Date(year, month - 1, 1).getDay();// 获取当月的天数const totalDays new Date(year, month, 0).getDate();// 获取今天的日期用于高亮显示const today new Date();const todayDate ${today.getFullYear()}-${(today.getMonth() 1).toString().padStart(2, 0)}-${today.getDate().toString().padStart(2, 0)};// 创建日期数组const days [];// 填充空白日期for (let i 0; i firstDay; i) {days.push();}// 填充实际日期for (let i 1; i totalDays; i) {const day ${year}-${month.toString().padStart(2, 0)}-${i.toString().padStart(2, 0)};const isToday day todayDate; // 如果是今天的日期则标记为今天days.push({ day: i,isToday });}this.setData({days,selectedDate:this.data.selectedDate?this.data.selectedDate:todayDate});},changeMonth(event) {const direction event.currentTarget.dataset.direction;let {year,month} this.data;if (direction prev) {month--;if (month 1) {month 12;year--;}} else if (direction next) {month;if (month 12) {month 1;year;}}this.setData({year,month,isChooseDate:}, () {this.loadCalendar();});},// 显示事件详情showEventDetail(event) {const day event.currentTarget.dataset.day.day;const selectedDate ${this.data.year}-${this.data.month.toString().padStart(2, 0)}-${day.toString().padStart(2, 0)};this.setData({isChooseDate:day,selectedDate:selectedDate})},calendar.scss .choose-day{border:1px solid #65b778;color: #65b778;font-weight: bold;background-color: #fff;}.highlight-today{background-color: #65b778;color: #fff;font-weight: bold;}效果图 八、滑动切换日历月份
calendar.html
view classcalendar bindtouchstarttouchStart bindtouchendtouchEnd/viewcalendar.js data: {startX: 0, // 触摸起始位置startY: 0, // 触摸起始位置minSwipeDistance: 50 // 设置最小滑动距离单位px},// 触摸开始事件touchStart(e) {this.setData({startX: e.touches[0].clientX,startY: e.touches[0].clientY});},// 触摸结束事件touchEnd(e) {const endX e.changedTouches[0].clientX;const endY e.changedTouches[0].clientY;const dx endX - this.data.startX; // 水平滑动距离const dy endY - this.data.startY; // 垂直滑动距离// 判断是否为左右滑动忽略上下滑动if (Math.abs(dx) Math.abs(dy)) {if (Math.abs(dx) this.data.minSwipeDistance) { // 只有当滑动距离超过阈值时才切换,防止误触if (dx 0) {// 向右滑动切换到上个月this.changeMonthBySwipe(prev);} else if (dx 0) {// 向左滑动切换到下个月this.changeMonthBySwipe(next);}}}},// 根据滑动方向切换月份changeMonthBySwipe(direction) {let {year,month} this.data;if (direction prev) {month--;if (month 1) {month 12;year--;}} else if (direction next) {month;if (month 12) {month 1;year;}}this.setData({year,month,isChooseDate: }, () {this.loadCalendar();});},
