【前端】小程序日历控件分享

之前小程序开发需要用到日历控件，但是关于小程序可用的实在资源有限，于是就自己写了一个，如今项目上线后将它分享出来，希望能帮到需要的人。
效果图：

JS代码：

dateData: function () {let dataAll = []//总日历数据let dataAll2 = []//总日历数据let dataMonth = []//月日历数据let date = new Date//当前日期let year = date.getFullYear()//当前年let week = date.getDay();//当天星期几let weeks=[]let month = date.getMonth() + 1//当前月份let day = date.getDate()//当天let daysCount = 100//一共显示多少天let dayscNow = 0//计数器let monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]//月份列表let nowMonthList=[]//本年剩余年份for (let i = month;i<13;i++){nowMonthList.push(i)}let yearList = [year]//年份最大可能for (let i = 0; i < daysCount/365+2;i++){yearList.push(year+i+1)}    let leapYear = function (Year) {//判断是否闰年 if (((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0)) {return (true);} else { return (false); }}for (let i = 0; i < yearList.length;i++){//遍历年let mListif (yearList[i] == year){//判断当前年份mList = nowMonthList}else{mList = monthList}for (let j = 0; j < mList.length;j++){//循环月份dataMonth=[]let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]let t_days_thisYear=[]if (yearList[i] == year){for (let m = 0; m<nowMonthList.length;m++){t_days_thisYear.push(t_days[mList[m]-1])}t_days = t_days_thisYear} else {t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]}for (let k = 0; k < t_days[j];k++){//循环每天dayscNow++let nowDataif (dayscNow < daysCount) {//如果计数器没满let days = k + 1if (days < 10) {days = "0" + days}if (yearList[i] == year && mList[j] == month){//判断当年当月if (k + 1 >= day) {nowData = {year: yearList[i],month: mList[j],day: k + 1,date: yearList[i] + "" + mList[j] + days,selected: 0,re: yearList[i] + "-" + mList[j] + "-" + days,}dataMonth.push(nowData)if (k+1 == day) {let date = new Date(yearList[i] + "-" + mList[j] + "-" + (k + 1))let weekss = date.getDay()//获取每个月第一天是周几weeks.push(weekss)}}}            else {//其他情况nowData = {//组装自己需要的数据year: yearList[i],month: mList[j],day: k + 1,date: yearList[i] + "" + mList[j] + days,selected: 0,re: yearList[i] + "-" + mList[j] + "-" + days,}dataMonth.push(nowData)if (k == 0) {let date = new Date(yearList[i] + "-" + mList[j] + "-" + k + 1)let weekss = date.getDay()//获取每个月第一天是周几weeks.push(weekss)}}}else{break}}dataAll.push(dataMonth)}}for (let i = 0; i < dataAll.length;i++){if (dataAll[i].length!=0){dataAll2.push(dataAll[i]);}}this.setData({date: dataAll2,weeks: weeks})},

以上代码主要功能是作为数据源渲染
wxml代码：


<view class="headbox2"><view class="headdate">日</view><view class="headdate">一</view><view class="headdate">二</view><view class="headdate">三</view><view class="headdate">四</view><view class="headdate">五</view><view class="headdate">六</view>
</view>
<view class="headbox"><view class="headdate">日</view><view class="headdate">一</view><view class="headdate">二</view><view class="headdate">三</view><view class="headdate">四</view><view class="headdate">五</view><view class="headdate">六</view>
</view>
<view class="mouth" wx:for="{{date}}" wx:for-item="date" wx:for-index="index"><view class="mouthhead">{{date[index].year}}年{{date[index].month}}月</view><view class="daybox"><view class="day" wx:if="{{weeks[index]>0}}"></view><view class="day" wx:if="{{weeks[index]>1}}"></view><view class="day" wx:if="{{weeks[index]>2}}"></view><view class="day" wx:if="{{weeks[index]>3}}"></view><view class="day" wx:if="{{weeks[index]>4}}"></view><view class="day" wx:if="{{weeks[index]>5}}"></view><view class="day {{item.selected == 1 ? 'bc':''}}" wx:for="{{date}}" wx:for-index="idx" data-index="{{index}}" data-indexs="{{idx}}" bindtap="selectday"><view class="actname {{item.selected == 1 ? 'bc2':''}}">{{date[idx].act.subject}}</view>{{date[idx].day}}<view class="actname2 {{item.selected == 1 ? 'bc2':''}}" wx:if="{{date[idx].act.rate}}">{{date[idx].act.rate/10}}折</view></view></view>
</view>
<view class="none88" wx:if="{{pagetype=='day'}}"></view>
<view class="fixedbtn" bindtap="submitbtn" wx:if="{{pagetype=='day'}}">确认选择</view>

将数据渲染至wxml

wxss样式代码：

.headdate{height: 30px;background-color: white;flex:1;text-align: center;line-height: 30px;
}
.headbox{display: flex;display: -webkit-flex;border-bottom: 1px solid #e5e5e5;
}
.headbox2{display: flex;position: fixed;width: 750rpx;display: -webkit-flex;border-bottom: 1px solid #e5e5e5;background-color: white;z-index: 2;
}
.mouthhead{height: 88rpx;background-color: #f4f4f4;width: 750rpx;line-height: 88rpx;text-align: center;
}
.mouth{/* background-color: white; *//* padding-top: 10rpx;padding-bottom: 10rpx;  */
}
.daybox{background-color: white; padding-top: 10rpx;padding-bottom: 10rpx;   }
.day{width: 107rpx;height: 107rpx;line-height: 107rpx;text-align: center;display: inline-block;position: relative;top: 0;margin-top: -10rpx;overflow: hidden;color: #353535;font-size: 34rpx;
}
.day2{color: #04babe;width: 107rpx;height: 107rpx;line-height: 107rpx;text-align: center;display: inline-block;position: relative;bottom: 0;margin-top: 0;
}
.actname{color: #04babe;position: absolute;font-size: 20rpx;top: -30rpx;width: 107rpx;text-align: center;
}
.actname2{color: #04babe;position: absolute;font-size: 20rpx;bottom: -30rpx;width: 107rpx;text-align: center;
}
.bc{background-color: #04babe;color: white!important;
}
.bc2{color: white!important;
}
.none88{height: 88rpx;width: 750rpx;
}

三思先生：Q599901155

【前端】小程序日历控件分享相关推荐

小程序日历控件分享按月传值显示
最近正在写小程序的日历,百度了很多资料,发现没有一个是可以按月传值的日历表,就自己写了一个,分享给正在各种查找日历控件的童靴们: js: //日历显示最关键方法:dateData: function ...
微信小程序地图控件Map的使用
本文介绍微信小程序map控件的使用 map为原生控件之一-- 介绍完map控件之后下面直接来看代码怎么实现吧和往常一样,这些代码贴过去就可以直接通用的首先wxml文件(极简): <map i ...
【delphi】开发微信小程序后台控件（一）（含源代码、演示程序、控件使用帮助）
1. 前言微信小程序已经非常普及,但是遗憾的是官方提供的 SDK 等没有Delphi语言的,这样使用Delphi语言开发微信小程序后台就相对比较困难,需要研究平台API,费时费力,特别是调试API很 ...
【delphi】开发微信小程序后台控件（三）（含源代码、演示程序、控件使用帮助）
7. 微信小程序控件测试 7.1 设置参数选择[公共功能]-[编辑控件属性]菜单,设置相关参数并保存 7.2 双击绿色运行按键或者启动小程序功能菜单至此,小程序后台服务已经成功启动,可以在前端 ...
delphi控件切图界面闪烁_小程序设计，不得不说的7个坑（附资源：新版小程序 UI 控件，Sketch 版）...
一年半的时间,我们亲眼见证了小程序从萌芽成长为参天大树,支撑起我们现今的生活方式,让我们在他的树荫下享受着舒适.很多公司自然不会错过这次机会,纷纷加入到小程序的行列. 这对设计和开发而言算是一次挑战, ...
微信小程序视图控件与bindtap之间的问题的解决
在微信小程序中最常用的<view>控件可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType=&qu ...
微信小程序text控件部分字体文字大小和颜色设置四
在我们android中有的时候会要求textview控件显示文字部分颜色不同而且大小也不同,这个在微信小程序中怎么做呢?因为在微信小程序中所有的显示都是通过标签来实现的,那么标签时可以嵌套的,比如显示 ...
微信小程序view动态长度_微信小程序关于控件尺寸动态计算的问题
自定义相机界面,顶部80rpx,底部210rpx,中间剩余高度填充相机视频流view. 实现思路是获取屏幕高度,减去顶部80rpx再减去底部210rpx,结果赋值给相机视频流view的高度.这个高度需 ...
微信小程序view控件自动换行
使用场景:微信小程序.注册协议动态下发多个,需要view自动换行,同时点击跳转协议内容场景需求 1.效果图. 2.xml界面代码 <view cl ...

【前端】小程序日历控件分享

【前端】小程序日历控件分享相关推荐

最新文章

热门文章