欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现日历效果

程序员文章站 2024-01-17 12:24:58
本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果预览: wxml部分:

本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下

效果预览:

微信小程序实现日历效果

wxml部分:

<view class='box1' style='width: {{ sysw * 7 }}px'>
 <view class='datebox'>{{ year }} - {{ month}}</view>
 <block wx:for='{{ weekarr }}'>
  <view style='width: {{ sysw }}px; height: {{ sysw }}px; line-height: {{ sysw }}px;'>{{ item }}</view>
 </block>
 <block wx:for='{{ arr }}'>
  <view style='{{ index == 0 ? "margin-left:" + sysw * marlet + "px;" : "" }}width: {{ sysw }}px; height: {{ sysw }}px; line-height: {{ sysw }}px;' class='{{ item == getdate ? "dateon" : ""}}'>{{ item }}</view>
 </block>
</view>

wxss部分:

.box1 .datebox{
 width: 100%;
 height: 50px;
 line-height: 50px;
 text-align: center;
 margin-top: 20px;
 font-size: 40rpx;
}

.box1{
 display: flex;
 flex-wrap: wrap;
 margin: 0 auto;
}

.box1>view{
 height: 30px;
 line-height: 30px;
 text-align: center;
 font-size: 34rpx;
}

.dateon{
 border-radius: 50%;
 background-color: hotpink;
 color: #fff;
}

js部分:

// page/index/index.js
page({

 /**
  * 页面的初始数据
  */
 data: {
  arr: [],
  sysw: null,
  lastday: null,
  firstday: null,
  weekarr: ['日', '一', '二', '三', '四', '五','六'],
  year: null
 },

 //获取日历相关参数
 datatime: function () {
  var date = new date();
  var year = date.getfullyear();
  var month = date.getmonth() ;
  var months = date.getmonth() + 1;

  //获取现今年份
  this.data.year = year;

  //获取现今月份
  this.data.month = months;

  //获取今日日期
  this.data.getdate = date.getdate();

  //最后一天是几号
  var d = new date(year, months, 0);
  this.data.lastday = d.getdate();

  //第一天星期几
  let firstday = new date(year, month, 1);
  this.data.firstday = firstday.getday();
 },

 onload: function (options) {
  this.datatime();

  //根据得到今月的最后一天日期遍历 得到所有日期
  for (var i = 1; i < this.data.lastday + 1; i++) {
   this.data.arr.push(i);
  }
  var res = wx.getsysteminfosync();
  this.setdata({
   sysw: res.windowheight / 12,//更具屏幕宽度变化自动设置宽度
   marlet: this.data.firstday,
   arr: this.data.arr,
   year: this.data.year,
   getdate: this.data.getdate,
   month: this.data.month
  });
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。