本文实例为大家分享了小程序日历展示的具体代码，供大家参考，具体内容如下
根据前面的日历，又遇到到个好玩的日历需求，分享给大家
这是个带年月左右选取的日历展示！并且当天的对应日会被高亮显示！下面看下实现代码！
1.wxml代码结构
我要评论
<view class='wrap'>
<view>
<view class='date-show'>
<view class='lt-arrow' bindtap='lastmonth'>
<image src='../images/nextmonth.png' mode='aspectfit'></image>
</view>
{{year}}年{{month}}月
<view class='rt-arrow' bindtap='nextmonth'>
<image src='../images/nextmonth.png' mode='aspectfit'></image>
</view>
</view>
</view>
<view class='header'>
<view wx:for='{{date}}' class='{{(index == todayindex) && istodayweek ? "weekmark" : ""}}'>{{item}}<view></view></view>
</view>
<view class='date-box'>
<view wx:for='{{datearr}}' class='{{istoday == item.istoday ? "nowday" : ""}}' data-date='{{item.istoday}}'>
<view class='date-head'>
<view>{{item.datenum}}</view>
</view>
<view class='date-weight'>{{item.weight}}</view>
</view>
</view>
</view>
2.wxss代码结构
.date-show{
position: relative;
width: 250rpx;
font-family: pingfang-sc-regular;
font-size: 40rpx;
color: #282828;
text-align: center;
margin: 59rpx auto 10rpx;
}
.lt-arrow,.rt-arrow{
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
}
.lt-arrow image,.rt-arrow image{
width: 14rpx;
height: 26rpx;
}
.lt-arrow{
left: -110rpx;
transform: rotate(180deg);
}
.rt-arrow{
right: -100rpx;
}
.header{
font-size: 0;
padding: 0 24rpx;
}
.header>view{
display: inline-block;
width: 14.285%;
color: #333;
font-size: 30rpx;
text-align: center;
border-bottom: 1px solid #d0d0d0;
padding: 39rpx 0;
}
.weekmark{
position: relative;
}
.weekmark view{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #22a7f6;
}
.date-box{
font-size: 0;
padding: 10rpx 0;
}
.date-box>view{
position: relative;
display: inline-block;
width: 14.285%;
color: #020202;
font-size: 40rpx;
text-align: center;
vertical-align: middle;
margin: 15rpx 0;
}
.date-head{
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
}
.nowday .date-head{
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background-color: #22a7f6;
margin: 0 auto;
}
.date-weight{
font-size: 22rpx;
padding: 15rpx 0;
}
.nowday .date-weight{
color: #22a7f6;
}
.one{
position: absolute;
bottom: 0;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: red;
}
.two{
position: absolute;
bottom: 30rpx;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: blue;
}
index.js
//index.js
//获取应用实例
const app = getapp()
page({
data: {
year: 0,
month: 0,
date: ['日', '一', '二', '三', '四', '五', '六'],
datearr: [],
istoday: 0,
istodayweek: false,
todayindex: 0
},
onload: function () {
let now = new date();
let year = now.getfullyear();
let month = now.getmonth() + 1;
this.dateinit();
this.setdata({
year: year,
month: month,
istoday: '' + year + month + now.getdate()
})
},
dateinit: function(setyear,setmonth){
//全部时间的月份都是按0~11基准，显示月份才+1
let datearr = []; //需要遍历的日历数组数据
let arrlen = 0; //datearr的数组长度
let now = setyear ? new date(setyear,setmonth) : new date();
let year = setyear || now.getfullyear();
let nextyear = 0;
let month = setmonth || now.getmonth(); //没有+1方便后面计算当月总天数
let nextmonth = (month + 1) > 11 ? 1 : (month + 1);
let startweek = new date( year+','+(month + 1)+','+1).getday(); //目标月1号对应的星期
let daynums = new date(year,nextmonth,0).getdate(); //获取目标月有多少天
let obj = {};
let num = 0;
if(month + 1 > 11){
nextyear = year + 1;
daynums = new date(nextyear,nextmonth,0).getdate();
}
arrlen = startweek + daynums;
for(let i = 0; i < arrlen; i++){
if(i >= startweek){
num = i - startweek + 1;
obj = {
istoday: '' + year + (month + 1) + num,
datenum: num,
weight: 5
}
}else{
obj = {};
}
datearr[i] = obj;
}
this.setdata({
datearr: datearr
})
let nowdate = new date();
let nowyear = nowdate.getfullyear();
let nowmonth = nowdate.getmonth() + 1;
let nowweek = nowdate.getday();
let getyear = setyear || nowyear;
let getmonth = setmonth >= 0 ? (setmonth + 1) : nowmonth;
if (nowyear == getyear && nowmonth == getmonth){
this.setdata({
istodayweek: true,
todayindex: nowweek
})
}else{
this.setdata({
istodayweek: false,
todayindex: -1
})
}
},
lastmonth: function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
this.setdata({
year: year,
month: (month + 1)
})
this.dateinit(year,month);
},
nextmonth: function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
this.setdata({
year: year,
month: (month + 1)
})
this.dateinit(year, month);
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论