• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序组件----折叠日历

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

工作中要求实现一个类似日历的功能,引入 极点日历 发现好像不是我想要的功能,正好时间充足就自己写了一个微信小程序组件,方便以后使用

功能描述:实现日期切换,月视图和周视图切换

效果图大概就是这样了

布局用的flex,实现起来很快,然后就是日期和星期的对应显示

根据用户选择的日期确定当月有多少天,将所有的天放在一个数组中,然后将所有的天通过一个月中的每个人星期天切割组成一个二维数组

那么怎么拿到每个月的天数呢?网上查到一个简单的方式

new Date(year, month, 0).getDate()

通过给的年月,直接拿当月的最后一号,这样就可以确定当月有多少天

拿到的多后一天进行for循环,拿到这个月的所有天数据,通过getDay() 方法拿到这个月中的所有星期天的日子,number-1后就是对应的索引,有索引之后就可以去切割数组了

这里切割数组有个小技巧,push()方法我们拿到的数据是[1,2,3,4,....,30],所有的星期天数据是[3,10,17,24,31],这样在切割周数据的时候会很棘手,但是用unshift()方法拿到的数据是[31,24,,10,3],遍历[31,24,10,3],用splice方法去依次从第30,24,10,3位切割七位数据,基本就可以拿到每个月的每一周的二维数组了,然后检查首位周的数据,进行空位补足,完整方法↓

getMonthData(year, month) {
      let that = this;
      let dayData = [];
      let weekData = [];
      let sundayDays = [];
      let dateObj = null;
      //拿到当月有多少天
      let lastDay = new Date(year, month, 0).getDate();
      console.log(year + '年' + month + '月有' + lastDay + '天');
      //找到每个月的星期天,切割数组
      for (let i = 1; i <= lastDay; i++) {
        dayData.push(i);
        dateObj = new Date(`${year}/${month}/${i}`);
        if (dateObj.getDay() == 0) {
          sundayDays.unshift(i);
        }
      }
      for (let i = 0; i < sundayDays.length; i++) {
        weekData.unshift(dayData.splice(sundayDays[i] - 1, 7))
      }
      if (dayData.length !== 0) {
        weekData.unshift(dayData);
      }

      //检查首周是否有七天
      if (weekData[0].length < 7) {
        let i = 0;
        let firstWeek = weekData[0].reverse();
        let item = null;
        let newWeekData = [];
        for (i = 0; i < 7; i++) {
          item = firstWeek[i] || -1;
          newWeekData.unshift(item)
        }
        weekData[0] = newWeekData;
      }
      //检查最后一周是否有七天
      if (weekData[weekData.length - 1].length < 7) {
        let i = 0;
        let lastWeek = weekData[weekData.length - 1]
        let item = null;
        let newWeekData = [];
        for (i = 0; i < 7; i++) {
          item = lastWeek[i] || -1;
          newWeekData.push(item)
        }
        weekData[weekData.length - 1] = newWeekData;
      }
      //拿到当前日期的本周数据
      let nowWeekData = weekData.filter((weekItem) => {
        if (weekItem.indexOf(new Date().getDate()) !== -1) {
          return weekItem
        }
      })
      that.setData({
        weekData,
        nowWeekData: nowWeekData[0]
      })
    },

我觉得比较有价值的东西就在这个方法里面了,自己写的时候还是感觉代码写的有些low,感觉日历应该是有更好的方法去实现,有简单方便的实现方式希望大家也能一起分享

代码上传至码云仓库:https://gitee.com/wzr0363/calendarComponent.git

 

   


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之swiper组件高度自适应发布时间:2022-07-18
下一篇:
微信小程序商业级实战发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap