微信小程序实现日历效果


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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
js实现旋转木马效果
Mar 17 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
JS数组splice操作实例分析
Oct 12 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
php中常用字符串处理代码片段整理
2011/11/07 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
php微信开发之关注事件
2018/06/14 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
js实现简单进度条效果
2020/03/25 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python如何实现转换URL详解
2019/07/02 Python
python函数的作用域及关键字详解
2019/08/20 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
什么是属性访问器
2015/10/26 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
公司开业庆典主持词
2014/03/21 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python 使用dict实现switch的操作
2021/04/07 Python