微信小程序实现日历效果


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 相关文章推荐
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
jQuery select操作控制方法小结
May 26 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
小程序实现列表删除功能
Oct 30 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
python实现2048小游戏
2015/03/30 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python数据预处理方式 :数据降维
2020/02/24 Python
django rest framework 过滤时间操作
2020/07/12 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
String和StringBuffer的区别
2015/08/13 面试题
2014年志愿者工作总结
2014/11/20 职场文书
客房服务员岗位职责
2015/02/09 职场文书
教师节获奖感言
2015/07/31 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
Django实现翻页的示例代码
2021/05/24 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
redis protocol通信协议及使用详解
2022/07/15 Redis