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


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 的 trim 函数的代码
Aug 13 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
javascript中数组方法汇总
Jul 07 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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维护文件系统
2006/10/09 PHP
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python中的编码知识整理汇总
2016/01/26 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
微信公众号token验证失败解决方案
2019/07/22 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Django celery异步任务实现代码示例
2020/11/26 Python
用Python实现职工信息管理系统
2020/12/30 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
外贸业务员工作职责
2014/01/06 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
小学庆六一活动总结
2014/08/28 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
文明上网主题班会
2015/08/14 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Python安装使用Scrapy框架
2022/04/12 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技