微信小程序日历效果

更新时间：2018年12月29日 08:55:02 作者：lengyue1084

这篇文章主要为大家详细介绍了微信小程序日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

项目需要一个日历功能，花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k，有问题欢迎指正

如图：

index.wxml

<view class="page">
 <view class="box">
  <view class="box-flex">
   <view class="flex-item">
    <view class="item-content" bindtap="doDay" data-key='left'>
     <view class="glyphicon glyphicon-triangle-left"></view>
    </view>
   </view>
   <view class="flex-item item-content-current-day">
    <view class="item-content">{{currentDate}}</view>
   </view>
   <view class="flex-item">
    <view class="item-content" bindtap="doDay" data-key="right">
     <view class="glyphicon glyphicon-triangle-right"></view>
    </view>
   </view>
  </view>
  <view class="box-flex">
   <view class="flex-item">
    <view class="item-content">一</view>
   </view>
   <view class="flex-item">
    <view class="item-content">二</view>
   </view>
   <view class="flex-item">
    <view class="item-content">三</view>
   </view>
   <view class="flex-item">
    <view class="item-content">四</view>
   </view>
   <view class="flex-item">
    <view class="item-content">五</view>
   </view>
   <view class="flex-item">
    <view class="item-content">六</view>
   </view>
   <view class="flex-item">
    <view class="item-content">日</view>
   </view>
  </view>
  <view class="box-flex">
   <view class="flex-item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
     <view class="item-content" wx:if="{{currentDay != vo}}">{{vo}}</view>
     <view class="item-content bk-color-day" wx:else>{{vo}}</view>
   </view>
  </view>
 </view>
</view>

index.wxss

@import '../../dist/css/icon.wxss';
page {
 background-color: #2a8cef;
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: stretch;
 font-size: 14px;
}
 
.box {
 display: block;
 margin: 10px;
}
 
.box-flex {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
}
 
.flex-item {
 flex-flow: nowrap;
 flex-grow: 1;
 flex-shrink: 1;
 width: 14.2%;
}
 
.item-content {
 margin: 5px;
 padding: 0 10px;
 text-align: center;
 background-color: #000;
 height: 2rem;
 line-height: 2rem;
 color: #fff;
}
 
.bk-color-day {
 background-color: #8A2BE2;
}
 
.item-content-current-day {
 flex-grow: 2;
}

index.js

var app = getApp();
Page({
  data: {
    currentDate: "2017年05月03日",
    dayList: '',
    currentDayList: '',
    currentObj: '',
    currentDay: ''
  },
  onLoad: function (options) {
    var currentObj = this.getCurrentDayString()
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',
      currentDay: currentObj.getDate(),
      currentObj: currentObj
    })
    this.setSchedule(currentObj)
  },
  doDay: function (e) {
    var that = this
    var currentObj = that.data.currentObj
    var Y = currentObj.getFullYear();
    var m = currentObj.getMonth() + 1;
    var d = currentObj.getDate();
    var str = ''
    if (e.currentTarget.dataset.key == 'left') {
      m -= 1
      if (m <= 0) {
        str = (Y - 1) + '/' + 12 + '/' + d
      } else {
        str = Y + '/' + m + '/' + d
      }
    } else {
      m += 1
      if (m <= 12) {
        str = Y + '/' + m + '/' + d
      } else {
        str = (Y + 1) + '/' + 1 + '/' + d
      }
    }
    currentObj = new Date(str)
    this.setData({
      currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月' + currentObj.getDate() + '日',
      currentObj: currentObj
    })
    this.setSchedule(currentObj);
  },
  getCurrentDayString: function () {
    var objDate = this.data.currentObj
    if (objDate != '') {
      return objDate
    } else {
      var c_obj = new Date()
      var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
      return new Date(a)
    }
  },
  setSchedule: function (currentObj) {
    var that = this
    var m = currentObj.getMonth() + 1
    var Y = currentObj.getFullYear()
    var d = currentObj.getDate();
    var dayString = Y + '/' + m + '/' + currentObj.getDate()
    var currentDayNum = new Date(Y, m, 0).getDate()
    var currentDayWeek = currentObj.getUTCDay() + 1
    var result = currentDayWeek - (d % 7 - 1);
    var firstKey = result <= 0 ? 7 + result : result;
    var currentDayList = []
    var f = 0
    for (var i = 0; i < 42; i++) {
      let data =[]
      if (i < firstKey - 1) {
        currentDayList[i] = ''
      } else {
        if (f < currentDayNum) {
          currentDayList[i] = f + 1
          f = currentDayList[i]
        } else if (f >= currentDayNum) {
          currentDayList[i] = ''
        }
      }
    }
    that.setData({
      currentDayList: currentDayList
    })
  }
})

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

您可能感兴趣的文章:

JavaScript数组方法之findIndex()的用法详解
findIndex()方法是一个非常实用的数组方法,可以帮助我们快速查找符合某个条件的元素,本文给大家介绍JavaScript数组方法之findIndex()的用法,感谢的朋友跟随小编一起看看吧
2023-10-10
js数组对象的includes方法使用
这篇文章主要介绍了js数组对象的includes方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Javascript中拼接大量字符串的方法
这篇文章主要介绍了Javascript中拼接大量字符串的方法,本文实现的就是JS语言中的Heredoc语法,需要的朋友可以参考下
2015-02-02
JS代码随机生成姓名、手机号、身份证号、银行卡号
下面小编自己写的一个js生成器代码，代码比较简单，实用性非常高，感兴趣的朋友一起学习吧
2016-04-04
框架页面高度自动刷新的Javascript脚本
框架页面高度自动刷新,加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码，具体实现如下，感兴趣的朋友可以了解下
2013-11-11
微信小程序实现弹出菜单
这篇文章主要为大家详细介绍了微信小程序实现弹出菜单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
19个很有用的 JavaScript库推荐
流行的 JavaScript 库有jQuery，MooTools，Prototype，Dojo和YUI等，这些 JavaScript 库功能丰富，加上它们众多的插件，几乎能实现任何你需要的功能
2011-06-06
前端开发之便利店收银系统代码
这篇文章主要介绍了社区便利店收银系统代码,使用前端初级开发者，代码很简单需要的朋友可以参考下
2019-12-12
js获取异步函数数据的实现
本文主要介绍了js获取异步函数数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
微信小程序用户自定义模版用法实例分析
这篇文章主要介绍了微信小程序用户自定义模版用法,结合实例形式较为详细的分析了微信小程序自定义模板的定义、数据调用、布局设置等简单使用技巧,需要的朋友可以参考下
2017-11-11

微信小程序日历效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具