微信小程序> 日历代码(微信小程序)

日历代码(微信小程序)

浏览量:1479 时间: 来源:Miss Stone

wxml代码:`

!--wxml--!--日历,记录女性月经周期--view class="calendar"!--年份和月份--view class="flex calendar-choose"!--图标--view class="previcon" bindtap="changeMonth"image src="../../images/small.png"/image/view!--显示月份--view class="mouth-picker"view class="month"{{cur_month}}月/view/view!--显示年份--view class="year-picker"view class="year"{{cur_year}}年/view/view!--图标--view class="nexticon" bindtap="changeYear"image src="../../images/big.png" /image/view/viewview class="flex week-list"view class="week-itm" wx:for="{{weeklist}}"{{item}}/view/viewview class="flex days-list"view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev"text{{item}}/text/viewblock  wx:for="{{currentMonthDaysList}}"view class="day"text{{item}}/text/view/blockview class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" text{{item}}/text/view/view/view

wxss代码:

.calendar{  width:100%;  height:300rpx;  }.calendar-choose{  height:100rpx;  line-height:100rpx;  background:#fefefe;  padding:0 30rpx;  font-size:34rpx;  color:#353535;  border-bottom: 1rpx solid #e5e5e5;  display:flex;  justify-content:space-between;}.calendar .previcon, .calendar .nexticon{  width:20%;  height:40%;  margin-top:12rpx;}.previcon image, .nexticon image {  width:100%;  height:100%;}.calendar .mouth-picker{  width:600rpx;  text-align: center;  }.calendar .year-picker{  width:600rpx;  text-align: center;  }.calendar .week-list{  width:100%;  height:70rpx;  background:#b9c4c9;  display:flex;  justify-content:space-around;}.calendar .week-itm{  font-size:30rpx;  color:white;  width:14.28%;  height:100%;  padding-left:43rpx;  padding-top:15rpx;}.calendar .days-list{  width:100%;  display:flex;  flex-wrap:wrap;}.day{  width: 14%;  height:60rpx;  border-right:1rpx solid #e5e5e5;  border-bottom:1rpx solid #e5e5e5;  color:#333;  position: relative;  text-align: center;  line-height: 60rpx;  }.calendar .days-list .lm,.calendar .days-list .nm{  color:#b6b6b6;  }.calendar .day .ep{  color:#333;  }

js代码:

Page({  data: {    cur_month: 0,    cur_year: 0,    weeklist: ['日', '一', '二', '三', '四', '五', '六']        },                      onLoad: function (options) {    var cur_year = new Date().getFullYear();   //获取当前年    var cur_month = new Date().getMonth();    //获取当前月    this.setData({      cur_year: cur_year,      cur_month: cur_month + 1    });    this.calendar(cur_year, cur_month + 1);  },  //页面相关事件处理函数--监听用户下拉动作  onPullDownRefresh: function () {  },  /**   页面上拉触底事件的处理函数   **/  onReachBottom: function () {  },  /*   用户点击右上角分享   */  onShareAppMessage: function () {    return {      title: '简单日历实现小程序版本',      desc: '简单日历实现小程序版本',      path: '/pages/index/index'    };  },  calendar: function(year, month) {    var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    /**     * 本月天数     */    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {      days[1] = 29;      }    var day = days[month - 1];    /**     * 本月第一天星期几     */    var myDate = new Date(year, month - 1, 1);    var weektime = myDate.getDay();    /**     * 上个月的天数     */    if(month == 1) {      var prevyear = year - 1;      var prevmonth = 12;      var prevday = 31;    } else {      prevmonth = month - 1;      prevday = days[prevmonth - 1];    }    /**     * 下个月的天数     */    if(month == 12) {      var nextyear = year + 1;      var nextmonth = 1;      var nextday = 31;    } else {      nextmonth = month + 1;      nextday = days[nextmonth - 1];    }    /**     * 日历上第一个数字     */    if(weektime == 0) {      var firstnumber = 1;    } else {      firstnumber = prevday - weektime + 1;    }    /**     * 日历上最后一个数字     */    if(firstnumber == 1) {      var lastnumber = 7 - (day % 7);    } else {      if ((prevday - firstnumber + 1 + day) % 7 == 0) {        lastnumber = day;      } else {        var remainder = (prevday - firstnumber + 1 + day) % 7;        lastnumber = 7 - remainder;      }    }    var lastMonthDaysList = [];    var currentMonthDaysList = [];    var nextMonthDaysList = [];    if(firstnumber == 1) {      lastMonthDaysList = [];    } else{      for(var i = firstnumber; i = prevday; i++) {        lastMonthDaysList.push(i);      }    }    for(var i = 1; i = day; i++) {      currentMonthDaysList.push(i);    }    if(lastnumber == day) {      nextMonthDaysList = [];    } else {      for(var i = 1; i = lastnumber; i++) {        nextMonthDaysList.push(i);      }    }    this.setData({      lastMonthDaysList: lastMonthDaysList,      currentMonthDaysList: currentMonthDaysList,      nextMonthDaysList: nextMonthDaysList    })  },  changeMonth: function(e) {    var cur_year = this.data.cur_year;    if(this.data.cur_month == 1) {      var cur_month = 12;      cur_year = cur_year - 1;    } else {      cur_month = this.data.cur_month - 1;    }        this.setData({      cur_year: cur_year,      cur_month: cur_month    });    //console.log('cur_year', cur_year);    //console.log('cur_month', cur_month);    this.calendar(cur_year, cur_month);  },  changeYear: function(e) {    var cur_year = this.data.cur_year - 1;    var cur_month = this.data.cur_month;    this.setData({      cur_year: cur_year,      cur_month: cur_month    })    this.calendar(cur_year, cur_month);     }})

效果图:
小程序
(有在网上参考别人的代码,写的不好,欢迎交流。)

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎