微信小程序实现日历效果


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升级新版本后选择器的语法问题
Jun 02 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
蛋糕店创业计划书
2014/05/06 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
7个关于Python的经典基础案例
2021/11/07 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS