码迷,mamicode.com
首页 > 微信 > 详细

微信小程序 --- 日历效果

时间:2019-04-28 15:25:20      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:ack   val   col   ast   text   hex   微信小程序   exp   null   

 

技术图片

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

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

微信小程序 --- 日历效果

标签:ack   val   col   ast   text   hex   微信小程序   exp   null   

原文地址:https://www.cnblogs.com/lsongyang/p/10784022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!