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


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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
javascript表格的渲染组件
Jul 03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
vue 弹出遮罩层样式实例
Jul 22 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
计数器详细设计
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Python如何对齐字符串
2020/07/30 Python
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
七年级生物教学反思
2014/01/30 职场文书
四年级科学教学反思
2014/02/10 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
师范生自荐信模板
2014/05/28 职场文书
师德师风个人整改措施
2014/10/27 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
公司员工培训管理制度
2015/08/04 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers