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


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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 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模板页面中分页代码的解析
2009/02/06 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python多线程thread及模块使用实例
2020/04/28 Python
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
药学专业毕业生求职信
2013/10/20 职场文书
一年级学生期末评语
2014/04/21 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
校园标语大全
2014/06/19 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
React自定义hook的方法
2022/06/25 Javascript
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技