微信小程序日历效果


Posted in Javascript onDecember 29, 2018

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

源码下载地址

项目需要一个日历功能,花了一天时间实现的微信小程序日历,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 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
微信小程序日历组件使用方法详解
Dec 29 #Javascript
微信小程序自定义可滑动日历界面
Dec 28 #Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 #Javascript
微信小程序实现复选框效果
Dec 28 #Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django之常用命令详解
2016/06/30 Python
Python解惑之整数比较详解
2017/04/24 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
浅析Python3 pip换源问题
2020/01/06 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
军训学生自我鉴定
2014/02/12 职场文书
债务纠纷委托书
2014/08/30 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2014年底工作总结
2014/12/15 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL