小程序实现日历左右滑动效果


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了小程序日历左右滑动效果的具体代码,供大家参考,具体内容如下

效果图

小程序实现日历左右滑动效果

小程序实现日历左右滑动效果

小程序实现日历左右滑动效果

wxml

<scroll-view class="scroll-view" scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation>
 <view class='item' style='width:{{itemWidth}}px' wx:for="{{dateList}}" data-index='{{index}}' bindtap='clickDate'>
 <view class='text-view'>
 <view class='day {{index==clickIndex?"day-active":""}}'>{{item.day}}</view>
 <text class='month'>{{item.month}}月</text>
 <view wx:if="{{item.month == sysmonth && item.day == nowDate}}">
 <text class='week'>今日</text>
 </view>
 <view wx:else>
 <text class='week'>{{item.week}}</text>
 </view>
 </view>
 </view>
</scroll-view>

js

// byjs_sun/pages/product/all/all.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 dateList:[], //存放日期的数组
 nowDate:'', //系统当前日期
 },
 // 格式化日期,时间
 formatTime(date) {
 const year = date.getFullYear()
 const month = date.getMonth() + 1
 const day = date.getDate()
 const hour = date.getHours()
 const minute = date.getMinutes()
 const second = date.getSeconds()
 return [year, month, day].map(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
 },
 // 格式化数字
 formatNumber(n) {
 n = n.toString()
 return n[1] ? n : '0' + n
 },
 
 // 获取日期详情
 getDateInfo(ts) {
 const date = new Date(ts);
 const weekArr = new Array("日", "一", "二", "三", "四", "五", "六");
 const week = date.getDay();
 let dateString = this.formatTime(date);
 let shortDateString = dateString.replace(/\//g, '-').substring(5, 10).replace(/-/g, '月') + "日";
 if (date.getDate() < 10) {
 shortDateString = shortDateString.replace(/0/g, '');
 }
 return {
 shortDateString,
 dateString,
 month: date.getMonth() + 1,
 day: date.getDate(),
 week: weekArr[week]
 }
 },
 
/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 var myDate = new Date(); //获取系统当前时间
 var sysmonth = myDate.getMonth() + 1
 var nowDate = myDate.getDate(); //当前是本月几日
 var today = myDate.toLocaleDateString(); //今日年月日
 that.setData({
 nowDate: nowDate,
 sysmonth: sysmonth
 }),
 console.log('系统日期:',myDate);
 console.log('系统日期(年/月/日):',today);
 console.log('系统日期(月):', sysmonth);
 console.log('系统日期(日):', nowDate);
 
 // 获取屏幕宽度,设置每个日期宽度
 wx.getSystemInfo({
 success: (res) => {
 console.log(res);
 this.setData({
 windowWidth: res.windowWidth,
 itemWidth: parseInt(res.windowWidth / 7)
 });
 },
 })
 this.initData();
 },
 
 // 初始化日期
 initData() {
 const nowDateTime = +new Date();
 let dateList = [];
 for (let i = -30; i < 30; i++) {
 let obj = this.getDateInfo(nowDateTime + i * 24 * 60 * 60 * 1000);
 obj.isChoose = i == 0;
 dateList.push(obj);
 }
 this.setData({
 dateList,
 clickIndex: 30,
 scrollLeftIndex: 30
 
 });
 },
 
 // 点击日期方法
 clickDate(e) {
 var that = this;
 console.log('点击日期携带的下标:', e.currentTarget.dataset.index); //当前的点击的日期
 var index = e.currentTarget.dataset.index;
 that.setData({
 clickIndex: index
 });
 // console.log(that.data.scrollLeftIndex);
 console.log('当前点击日期:',that.data.dateList[index].shortDateString); //当前点击的日期
 
 // const {
 // index
 // } = e.currentTarget.dataset;
 // this.setData({
 // clickIndex: index
 // });
 // console.log(this.data.dateList[index]);
 },
})

样式

.scroll-view {
 height: 200rpx;
 background-color: #313751;
 width: 100%;
 white-space: nowrap;
}
.item {
 height: 200rpx;
 display: inline-block;
}
.text-view {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 height: 100%;
 color: #fff;
}
.month {
 font-size: 30rpx;
 margin-top: 10rpx;
}
.week {
 font-size: 32rpx;
 margin-top: 10rpx;
}
.day {
 font-size: 32rpx;
 width: 60rpx;
 height: 60rpx;
 border-radius: 10rpx;
 text-align: center;
 line-height: 60rpx;
 margin-top: 20rpx;
}
/* 日期选中的样式 */
.day-active {
 background-color: #FFB400;
 color: #fff;
}

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
原生js实现日期联动
Jan 12 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 #Javascript
小程序实现横向滑动日历效果
Oct 21 #Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
You might like
解析dedeCMS验证码的实现代码
2013/06/07 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Laravel find in set排序实例
2019/10/09 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
python搭建微信公众平台
2016/02/09 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python验证身份证信息实例代码
2019/05/06 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
给同事的道歉信
2014/01/11 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
篮球赛口号
2014/06/18 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
作弊检讨书
2015/01/27 职场文书
安徽导游词
2015/02/12 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python实现剪贴板的操作
2021/07/01 Python