经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现日历效果
来源:jb51  时间:2018/12/29 9:34:15  对本文有异议

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

效果预览:

wxml部分:

  1. <view class='box1' style='width: {{ sysW * 7 }}px'>
  2. <view class='dateBox'>{{ year }} - {{ month}}</view>
  3. <block wx:for='{{ weekArr }}'>
  4. <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{ item }}</view>
  5. </block>
  6. <block wx:for='{{ arr }}'>
  7. <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>
  8. </block>
  9. </view>

wxss部分:

  1. .box1 .dateBox{
  2. width: 100%;
  3. height: 50px;
  4. line-height: 50px;
  5. text-align: center;
  6. margin-top: 20px;
  7. font-size: 40rpx;
  8. }
  9.  
  10. .box1{
  11. display: flex;
  12. flex-wrap: wrap;
  13. margin: 0 auto;
  14. }
  15.  
  16. .box1>view{
  17. height: 30px;
  18. line-height: 30px;
  19. text-align: center;
  20. font-size: 34rpx;
  21. }
  22.  
  23. .dateOn{
  24. border-radius: 50%;
  25. background-color: hotpink;
  26. color: #fff;
  27. }
  28.  

js部分:

  1. // page/index/index.js
  2. Page({
  3.  
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. arr: [],
  9. sysW: null,
  10. lastDay: null,
  11. firstDay: null,
  12. weekArr: ['日', '一', '二', '三', '四', '五','六'],
  13. year: null
  14. },
  15.  
  16. //获取日历相关参数
  17. dataTime: function () {
  18. var date = new Date();
  19. var year = date.getFullYear();
  20. var month = date.getMonth() ;
  21. var months = date.getMonth() + 1;
  22.  
  23. //获取现今年份
  24. this.data.year = year;
  25.  
  26. //获取现今月份
  27. this.data.month = months;
  28.  
  29. //获取今日日期
  30. this.data.getDate = date.getDate();
  31.  
  32. //最后一天是几号
  33. var d = new Date(year, months, 0);
  34. this.data.lastDay = d.getDate();
  35.  
  36. //第一天星期几
  37. let firstDay = new Date(year, month, 1);
  38. this.data.firstDay = firstDay.getDay();
  39. },
  40.  
  41. onLoad: function (options) {
  42. this.dataTime();
  43.  
  44. //根据得到今月的最后一天日期遍历 得到所有日期
  45. for (var i = 1; i < this.data.lastDay + 1; i++) {
  46. this.data.arr.push(i);
  47. }
  48. var res = wx.getSystemInfoSync();
  49. this.setData({
  50. sysW: res.windowHeight / 12,//更具屏幕宽度变化自动设置宽度
  51. marLet: this.data.firstDay,
  52. arr: this.data.arr,
  53. year: this.data.year,
  54. getDate: this.data.getDate,
  55. month: this.data.month
  56. });
  57. }
  58. })

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号