uni-app微信小程序vue二次封装日历组件
2019-06-19 15:19
846 查看
注意:重点在28 30 31天
1.初始化一些数据并且对特殊的日期进行处理
2. // 根据年月日设置当前月有多少天 并更新年月日数组
这个方法在生命周期onload,created生命周期调用一次 其中传入的值为上面截图初始化的数据即可,_th为this实例
还需要在日历组件滑动onchange时调用一次,传入的参数为当前onchange里接收的参数
dataMethods(year, month, day, hour, _th) {
let daysNum =
year === nowYear && month === nowMonth
? getDays(year, month)
: getDays(year, month);
day = day > daysNum ? 1 : day;
let years = []; let months = []; let days = []; let hours = []; let yearIdx = 0; let monthIdx = 0; let dayIdx = 0; let hourInx = 0; // 重新设置年份列表 for (let i = nowYear; i <= nowYear + 10; i++) { years.push(i); } years.map((v, idx) => { if (v === year) { yearIdx = idx; } }); // 重新设置月份列表 for (let i = 1; i <= 12; i++) { if (i < 10) { i = "0" + i; } months.push(i); } months.map((v, idx) => { if (v === month) { monthIdx = idx; } }); // 重新设置日期列表 for (let i = 1; i <= daysNum; i++) { days.push(i); } days.map((v, idx) => { if (v === day) { dayIdx = idx; } }); // 重新设置时间列表 for (let i = 0; i <= 23; i++) { if (i < 10) { i = "0" + i; } hours.push("" + i); } hours.map((v, idx) => { if (v === hour) { hourInx = idx; } }); _th.years = years; _th.months = months; _th.days = days; _th.months = months; _th.year = year; _th.month = month; _th.day = day; _th.hours = hours; _th.hour = hour; }
相关文章推荐
- 微信小程序:有赞小程序UI( vant-weapp ) actionsheet组件源码窥探
- uni-app微信小程序模拟器运行到某一页面调试操作
- 新手快速入门微信小程序组件库 iView Weapp
- 微信小程序自定义组件封装及父子间组件传值的方法
- 用微信开发者工具--打开小程序组件vant Weapp示例
- 微信小程序之如何在组件里引用ivew weapp控件
- 小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
- 微信小程序导入Vant-Weapp组件库及出错处理
- 微信小程序 wxapp内容组件 icon详细介绍
- uni-app 微信小程序-放大缩小效果以及抖动解决办法
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件,开源
- 小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件,开源
- 小程序登录微信授权组件封装
- 微信小程序wepy框架里集成iview Weapp组件
- uniapp调用小白接口教程(开箱即用!以打包成微信小程序为例)
- 小程序用户反馈 - HotApp小程序统计仿微信聊天用户反馈组件,开源
- 微信小程序 wxapp内容组件 text详细介绍
- 微信小程序组件封装
- 微信小程序日历组件calendar详解及实例