uni-app微信小程序vue二次封装日历组件

ゝ一纸荒年。 2022-01-11 03:45 248阅读 0赞

注意：重点在28 30 31天  
1.初始化一些数据并且对特殊的日期进行处理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70]  
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;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmc5cnVp_size_16_color_FFFFFF_t_70]: /images/20220111/ba1ae4bd52184c41acf8bd892f25534f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序（组件--视图组件）

【前言】什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但

逃离我推掉我的手/ 2023年06月18日 12:55/ 0 赞/ 85 阅读

相关微信小程序日历

首先，做完的页面展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

客官°小女子只卖身不卖艺/ 2023年06月08日 06:35/ 0 赞/ 8 阅读

相关微信小程序封装音乐播放器组件

微信小程序的官方文档中，已经有 audio 组件。  <audio poster="{ {poster}}" name=

桃扇骨/ 2023年01月13日 01:59/ 0 赞/ 377 阅读

相关微信小程序日历弹框组件

> 参考文章：https://blogai.cn/posts/46 calendar.json { "usingComponents": { },

不念不忘少年蓝@/ 2022年12月09日 15:58/ 0 赞/ 419 阅读

相关微信小程序－vant-weapp日历组件的使用（年月日）

小程序vant-weapp的日历组件的使用话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[h

男娘i/ 2022年10月11日 01:00/ 0 赞/ 93 阅读

相关微信小程序－vant-weapp日历组件的使用（年月日）

小程序vant-weapp的日历组件的使用话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：[h

末蓝、/ 2022年10月08日 11:18/ 0 赞/ 530 阅读

相关微信小程序wx.request二次封装

> 这些天团队里开始做小程序开发了，之前没做过，都是第一次，第一次的感觉大家都懂的。周末看了一下小程序项目的代码，在网络请求上发现了一些小问题，最终没忍住想了点办法把reque

青旅半醒/ 2022年05月21日 23:55/ 0 赞/ 314 阅读

相关 uni-app微信小程序vue二次封装日历组件

注意：重点在28 30 31天 1.初始化一些数据并且对特殊的日期进行处理 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

ゝ一纸荒年。/ 2022年01月11日 03:45/ 0 赞/ 249 阅读

相关微信小程序 - 组件

> 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。一、基础组件 > 基础组件主要分为：视图容

深碍√TFBOYSˉ_/ 2021年12月05日 17:47/ 0 赞/ 674 阅读

相关微信小程序-组件

1.轮播图 <swiper indicator-dots="{ {indicatorDots}}" indicator-color="{

客官°小女子只卖身不卖艺/ 2021年11月30日 00:56/ 0 赞/ 623 阅读