微信小程序实现日历效果


Posted in Javascript onDecember 28, 2018

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

效果预览:

微信小程序实现日历效果

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
  });
 }
})

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

Javascript 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
vue登录注册实例详解
2019/09/14 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
小程序实现录音功能
2020/09/22 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python中super函数用法实例分析
2019/03/18 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
供电工程专业求职信
2014/08/09 职场文书
八项规定整改方案
2014/10/01 职场文书
2014年维稳工作总结
2014/11/18 职场文书
公司员工体检通知
2015/04/21 职场文书