微信小程序日历效果


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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 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
递归列出所有文件和目录
2006/10/09 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
遗传算法python版
2018/03/19 Python
Python3中的json模块使用详解
2018/05/05 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python flask框架post接口调用示例
2019/07/03 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
庆七一宣传标语
2014/10/08 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL