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


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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
删除节点的jquery代码
Jan 13 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
js实现自动播放匀速轮播图
Feb 06 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
python创建文件备份的脚本
2018/09/11 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
大学生学期个人总结
2015/02/12 职场文书
专家推荐信怎么写
2015/03/25 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS