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


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-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
jsonp原理及使用
Oct 28 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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之PHP语法学习笔记1
2006/12/17 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript函数详解
2015/02/27 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
js实现数组转换成json
2015/06/26 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python下载微信公众号相关文章
2019/02/26 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python 复平面绘图实例
2019/11/21 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Python如何定义有默认参数的函数
2020/08/10 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
年度考核自我评价
2014/01/25 职场文书
社区工作感言
2014/02/21 职场文书
公司股权转让协议书
2014/04/12 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
开除员工通知
2015/04/22 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
成人成长感言如何写?
2019/08/16 职场文书