小程序实现横向滑动日历效果


Posted in Javascript onOctober 21, 2019

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

<scroll-view class="scroll-view_H" scroll-x>
 <view class='list' style='width:{{ width }}rpx'>
  <view bindtap="select" wx:for="{{ calendar }}" wx:key="" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index==currentIndex? "current":""}}'>
  <text class='name'>{{ item.week }}</text>
  <text class='date'>{{ item.date }}</text>
  </view>
 </view>
</scroll-view>

js: 

function getThisMonthDays(year, month) {
  return new Date(year, month, 0).getDate();
 }
 // 计算每月第一天是星期几
 function getFirstDayOfWeek(year, month) {
  return new Date(Date.UTC(year, month - 1, 1)).getDay();
 }
 const date = new Date();
 const cur_year = date.getFullYear();
 const cur_month = date.getMonth() + 1;
 const cur_date = date.getDate();
 const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
 //利用构造函数创建对象
 function calendar(date, week) {
  this.date = cur_year + '-' + cur_month + '-' + date;
  if (date == cur_date) {
  this.week = "今天";
  } else if (date == cur_date + 1) {
  this.week = "明天";
  } else {
  this.week = '星期' + week;
  }
 }
 //当前月份的天数
 var monthLength = getThisMonthDays(cur_year, cur_month)
 //当前月份的第一天是星期几
 var week = getFirstDayOfWeek(cur_year, cur_month)
 var x = week;
 for (var i = 1; i <= monthLength; i++) {
  //当循环完一周后,初始化再次循环
  if (x > 6) {
  x = 0;
  }
  //利用构造函数创建对象
  that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  x++;
 }
 //限制要渲染的日历数据天数为7天以内(用户体验)
 var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
 that.setData({
  calendar: flag
 })
 selectd = flag;
 // console.log(selectd);
 var ret_id = [];
 const lengths = selectd.length
 for (let i = 0; i < lengths; i++) {
  ret_id[i] = selectd[i].date;
 }
 choosedate = ret_id[0];
 //设置scroll-view的子容器的宽度
 that.setData({
  width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
 })

CSS:

/*日历开始 */
scroll-view{
 height: 128rpx;
 width: 101%;
 position:fixed;
 top:355rpx;
 
}
scroll-view .list{
 display: flex;
 flex-wrap: nowrap;
 justify-content: flex-start;
}
scroll-view .listItem{
 text-align: center;
 width:187rpx;
 height: 128rpx;
 background: #f4f4f4;
 padding-top: 30rpx;
 box-sizing: border-box;
 display: inline-block;
}
scroll-view .listItem text{
 display: block;
}
scroll-view .listItem .name{
 font-size: 25rpx;
}
scroll-view .listItem .date{
 font-size: 25rpx;
}
scroll-view .current{
 background-color:pink;
  width:200rpx;
 position:relative;
}
scroll-view .current text{
 color: #fff;
}

更多精彩的日历效果请学习参考专题:javascript日历插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
You might like
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python实现udp传输图片功能
2020/03/20 Python
Python实现验证码识别
2020/06/15 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
世界气象日活动总结
2015/02/27 职场文书
离婚上诉状范文
2015/05/23 职场文书
婚育证明格式
2015/06/17 职场文书
靠谱的活动总结
2019/04/16 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸