今天看见一张比较好看的万年历图,刚好自己也在开发微信小程序,原本想开发成微信小程序组件上传的,结果发现好像行不通,应该是不允许上传组件一类的,反正代码是写出来了。
效果图如下:
左右按钮和左滑右滑可以切换年份。大概代码在下面,复制粘贴到指定文件就行
.wxml 文件如下
<view class="full-screen-date-choose" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend'>
<image src="./images/bg.jpg"></image>
<view class="left" bindtap="lastYear">
<text class="left-arrow"></text>
</view>
<view class="right" bindtap="nextYear">
<text class="right-arrow"></text>
</view>
<view class="week">
<text>日</text>
<text>一</text>
<text>二</text>
<text>三</text>
<text>四</text>
<text>五</text>
<text>六</text>
</view>
<view class="clearView"></view>
<view class="date" wx:for="{{date}}" wx:for-item="month">
<view class="date-title">{{month.year}}年{{month.month}}月</view>
<view class="month">
<view class="week" wx:for="{{month.date}}" wx:for-item="week">
<text class="day {{activeDate == (month.year+'-'+month.month+'-'+day)?'active':''}}" bindtap="chooseDate"
data-value="{{month.year}}-{{month.month}}-{{day}}" wx:for="{{week}}" wx:for-item="day">{{day}}</text>
</view>
</view>
</view>
</view>
.wxss 样式文件如下
.full-screen-date-choose {
font-size: 14px;
}
.clearView {
height: 40px;
margin-top: 3%;
}
/* 背景图 */
.full-screen-date-choose image {
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
top: 0;
}
/* 顶部周一至周末 */
.full-screen-date-choose>.week {
width: 95%;
height: 40px;
line-height: 40px;
background-color: #EBF5FF;
border-radius: 3px;
color: #9CA6B2;
display: flex;
justify-content: space-between;
box-sizing: border-box;
position: fixed;
left: 2.5%;
top: 2.5%;
zoom: 1
}
/* 日期选择 */
.full-screen-date-choose .date {
width: 95%;
margin: 25px auto;
}
/* 日期选择顶部年月标题 */
.full-screen-date-choose .date .date-title {
text-align: center;
font-family: "黑体";
font-weight: bold;
font-size: 14px;
margin-bottom: 20px;
}
.full-screen-date-choose .date .date-title::before {
content: "";
display: inline-block;
width: 70px;
border: 1px solid #9BB6D2;
margin-right: 10px;
vertical-align: middle;
}
.full-screen-date-choose .date .date-title::after {
content: "";
display: inline-block;
width: 70px;
border: 1px solid #9BB6D2;
margin-left: 10px;
vertical-align: middle;
}
.full-screen-date-choose .date .month .week {
font-family: '微软雅黑';
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.week text {
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.week text.active {
background-color: rgba(0, 0, 0, .5);
border-radius: 50%;
color: #fff;
}
/* 左右箭头 */
.full-screen-date-choose .left {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 40px;
position: fixed;
top: 50%;
margin-top: -15px;
left: 15px;
}
.full-screen-date-choose .left-arrow {
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(225deg);
}
.full-screen-date-choose .right {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 40px;
position: fixed;
top: 50%;
margin-top: -15px;
right: 15px;
}
.full-screen-date-choose .right-arrow {
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(45deg);
}
js文件如下
// plugin/pages/hello-page.js
//触屏开始点坐标
var startDot = {
X: 0,
Y: 0
};
//触屏到点坐标
var touchDot = {
X: 0,
Y: 0
};
var time = 0; //触屏时间
var number; //定时器ID
Page({
data: {
date: [],
year: 0,
activeDate: ""
},
onLoad() {
let date = new Date();
let year = date.getFullYear();
this.setData({
year
})
this.calculateValues(year);
},
//判断每个月1号是周几
dayStart(year, month) {
let tmpDate = new Date(year, month - 1, 1);
return tmpDate.getDay();
},
//判断每个月有多少天
getDate(year, month) {
let tmpDate = new Date(year, month, 0);
return tmpDate.getDate();
},
//计算数据
calculateValues(year) {
//偶尔因为设备性能问题卡一下,我这里用这个提示一下,意思意思
wx.showToast({
title: '数据渲染中...',
icon: "loading",
duration: 2000
})
for (let i = 1; i <= 12; i++) {
let days = this.getDate(year, i);
let startDay = this.dayStart(year, i);
this.insertValues(year, i, days, startDay);
}
},
//填入数据
insertValues(year, month, days, startDay) {
let date = this.formatDateList(days, startDay);
let arr = this.data.date;
arr.push({
year,
month,
date
});
this.setData({
date: arr
})
},
//日期列表格式化
formatDateList(days, startDay) {
startDay -= 1;
let num = 1;
let allDay = Math.ceil((days + startDay) / 7) * 7;
let arr = [],
ARRAY = [];
for (let i = 0; i < allDay; i++) {
if (i < startDay || num > days) {
arr.push("");
} else {
arr.push(num);
num++;
}
}
for (let i = 0; i < Math.ceil((days + startDay) / 7); i++) {
ARRAY[i] = arr.slice(i * 7, (i + 1) * 7)
}
return ARRAY;
},
//选择日期
chooseDate(event) {
let value = event.currentTarget.dataset.value;
let arr = value.split("-");
if (arr[2]) {
this.setData({
activeDate: value
})
wx.showToast({
title: value,
icon: 'none',
duration: 1000
})
}
},
/**
* 触屏开始计时和获取坐标
*/
touchstart: function (event) {
startDot.X = event.touches[0].pageX;
startDot.Y = event.touches[0].pageY;
number = setInterval(function () {
time++;
}, 100);
},
/**
* 判断滑动距离和时间是否需要切换页面
*/
touchmove: function (event) {
touchDot.X = event.touches[0].pageX;
touchDot.Y = event.touches[0].pageY;
//向左滑处理
if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time > 0) {
this.nextYear();
clearInterval(number);
time = 0;
}
//向右滑处理
if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time > 0) {
this.lastYear();
clearInterval(number);
time = 0;
}
},
/**
* 结束触屏重置计时
*/
touchend: function (event) {
clearInterval(number);
time = 0;
},
// 下一年
nextYear: function () {
let year = this.data.year;
year++;
this.setData({
year,
date: []
})
this.calculateValues(year);
},
// 上一年
lastYear: function () {
let year = this.data.year;
year--;
this.setData({
year,
date: []
})
this.calculateValues(year);
}
})