微信小程序简单日历组件

微信小程序简单的日历组件

代码：

<!--日历组件-->
<view class='cld'><view class="cld-top"><!-- 年月区域 --><view class="mData"><view class="detail"><van-icon name="arrow-left" bindtap='previousMonth'/>{{year}}年{{month}}月<van-icon name="arrow" bindtap='nextMonth'/></view></view><!-- 星期显示区域 --><view class="dayData"><text wx:for="{{dayData}}" wx:key="index">{{item}}</text></view></view><!-- 日期显示区域 --><view class="cld-bottom"><text wx:for='{{slotArr}}' wx:key='index'>{{item.text}}<text class='round' style='background: {{item.bgcolor}};'></text></text></view>
</view>

/* components/calendar/calendar.wxss */
view{box-sizing: border-box;
}
.cld{height:100%;background:#fff;
}.cld-top{height:130rpx;font-size:26rpx;padding:25rpx 10rpx 10rpx 10rpx;box-shadow:0 3px 3px -1px #ccc;
}
.mData{text-align: center;height:43rpx;color:black;
}
.dayData{padding-top:16rpx;height:calc(100% - 43rpx);
}
.dayData text{display:inline-block;width:13%;margin-left:1.5%;text-align: center;
}
.dayData text:nth-child(1){margin-left:0;
}.cld-bottom{height:calc(100% - 130rpx);padding:10rpx;padding-top:0;font-size:29rpx;
}
.cld-bottom text{position: relative;display: inline-block;text-align: center;width:13%;margin-left:1.5%;margin-top:44rpx;
}
.cld-bottom text{position: relative;display: inline-block;text-align: center;width:13%;margin-left:1.5%;margin-top:44rpx;
}
.cld-bottom .round{position: absolute;display: inline-block;width: 14rpx;border-radius:50%;bottom: -20rpx;left:50%;margin-left: -7rpx;height:14rpx;
}
.cld-bottom text:nth-child(7n-6){margin-left:0;
}

// components/calendar/calendar.js
Component({lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行this.initYearMonth()this.initSloatArr()this.getYMDays(this.data.year,this.data.month)this.getNowDay(this.data.year,this.data.month,1)},detached: function() {// 在组件实例被从页面节点树移除时执行},},// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容attached: function() {// 在组件实例进入页面节点树时执行},detached: function() {// 在组件实例被从页面节点树移除时执行},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {dayData:['日','一','二','三','四','五','六',],year:'',  //年份month:'',  //月份allDays:[], //当前总共多少天,firstDay:'', //当月第一天星期几slotArr:[],  //占位数组(元素35个),Color1:[1,2,3],   //#44e036 ,展示圆点 },/*** 组件的方法列表*/methods: {// 初始化占位数组initSloatArr(){let copyArr=[]for(let i=0;i<35;i++){copyArr.push({text:''})}this.setData({slotArr:copyArr})},// 初始化年月initYearMonth(){this.setData({year:new Date().getFullYear(),month:new Date().getMonth()+1})},previousMonth(){if(this.data.month==1){this.setData({month:12,year:this.data.year-1})}else{this.setData({month:this.data.month-1})}this.initSloatArr()this.getYMDays(this.data.year,this.data.month)this.getNowDay(this.data.year,this.data.month,1)},nextMonth(){if(this.data.month==12){this.setData({month:1,year:this.data.year+1})}else{this.setData({month:this.data.month+1})}this.initSloatArr()this.getYMDays(this.data.year,this.data.month)this.getNowDay(this.data.year,this.data.month,1)},//根据年月获取总共多少天getYMDays(year,month){var newDate = new Date(year,month,0);let allFlag=newDate.getDate()let allData=[]for(let i=1;i<=allFlag;i++){allData.push(i)}this.setData({allDays:allData})},//根据年月日判断是星期几&修改占位数组内容显示日历getNowDay(y,m,d){let newDate=`${y}-${m}-${d}`this.setData({firstDay:new Date(newDate).getDay()})//改占位数组--->当前月第一天为周几this.setData({[`slotArr[${this.data.firstDay}].text`]:1})//递增占位数组this.data.slotArr.map((item,index)=>{if(this.data.slotArr[index].text){this.setData({[`slotArr[${index+1}].text`]:this.data.slotArr[index].text+1})}})//删除占位数组中多出的日子let zArr=JSON.parse(JSON.stringify(this.data.slotArr))for(let i=0;i<this.data.slotArr.length;i++){if(this.data.slotArr[i].text>this.data.allDays.length){zArr.splice(i,6)}}this.setData({slotArr:zArr})//设置要渲染的圆点//  Color1:[1,2,3],   //#44e036 ,展示圆点 for(let i=0;i<this.data.Color1.length;i++){for(let p=0;p<this.data.slotArr.length;p++){if(this.data.Color1[i]==this.data.slotArr[p].text){this.setData({[`slotArr[${p}].bgcolor`]:'#44e036'})break}}}}}
})

微信小程序简单日历组件相关推荐

微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序 — 长列表组件 recycle-view 详细教学
微信小程序 - 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view 长列表组件 recycle-view 的使用问题一.如何增加下拉刷新功能? 问 ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
微信小程序canvas 绘画组件的使用，画图
微信小程序canvas 绘画组件的使用,画图 canvas 绘画组件文章目录微信小程序canvas 绘画组件的使用,画图闲来没事写个画图的小工具吧,于是就用到了小程序的canvas组件一.先来 ...

微信小程序简单日历组件

微信小程序简单的日历组件

微信小程序简单日历组件相关推荐

最新文章

热门文章